理解幻灯片脚本的难度 [英] Difficulty in Understanding Slideshow script
问题描述
我从网上拍了幻灯片剧本。但有些功能我无法理解
这里是脚本
I have taken slide show script from net. But There some functions i cannot understand here is script
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title></title>
<script>
var interval = 1500;
var random_display = 0;
var imageDir = "my_images/";
var imageNum = 0;
imageArray = new Array();
imageArray[imageNum++] = new imageItem(imageDir + "01.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "02.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "03.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "04.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "05.jpg");
var totalImages = imageArray.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
return this.image_item.src;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
alert(imageArray[imageNum].image_item.src);
function randNum(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
imageNum = randNum(0, totalImages-1);
}
else {
imageNum = (imageNum+1) % totalImages;
}
var new_image = get_ImageItemLocation(imageArray[imageNum]);
//alert(new_image)
return(new_image);
}
function getPrevImage() {
imageNum = (imageNum-1) % totalImages;
var new_image = get_ImageItemLocation(imageArray[imageNum]);
return(new_image);
}
function prevImage(place) {
var new_image = getPrevImage();
document[place].src = new_image;
}
function switchImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "switchImage('"+place+"')";
timerID = setTimeout(recur_call, interval);
}
</script>
</head>
<body onLoad="switchImage('slideImg')">
<img name="slideImg" src="27.jpg" width=500 height=375 border=0>
<a href="#" onClick="switchImage('slideImg')">play slide show</a>
<a href="#" onClick="clearTimeout(timerID)"> pause</a>
<a href="#" onClick="prevImage('slideImg'); clearTimeout(timerID)"> previous</a>
<a href="#" onClick="switchImage('slideImg'); clearTimeout(timerID)">next </a>
</body>
</html>
这里我完全不知道什么是实际的功能
here exactly i dont know what does acctually function of
get_ImageItemLocation(imageObj)
和
imageItem(image_location)
这两个功能分别是什么？
提前感谢您的关注
what does these two functions seperately? Thanks in advance for attention
推荐答案
好的，我想通了。我的代码有很多错误。
Ok I figured it out. My code had many errors.
imageItem 是一个用于预加载图像的构造函数。它返回它预加载的图像的src（位置）。
imageItem is a constructor function designed to preload images. It returns the src (location) of the image that it preloads.
但是函数 get_ImageItemLocation（）假定imageItem返回了一个对象。
However the function get_ImageItemLocation() assumes that imageItem has returned an object.
整个过程应简化为：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title></title>
<script>
var interval = 1500;
var random_display = 0;
var imageDir = "my_images/";
var imageNum = -1;
var place;//For convenience this is best as a global
function imageItem(url) {
this.img = new Image();
this.img.src = url;
this.url = url;
}
var imageArray = [
new imageItem(imageDir + "01.jpg"),
new imageItem(imageDir + "02.jpg"),
new imageItem(imageDir + "03.jpg"),
new imageItem(imageDir + "04.jpg"),
new imageItem(imageDir + "05.jpg")
];
function randNum(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
imageNum = (random_display) ? randNum(0, imageArray.length-1) : ((imageNum+1) % imageArray.length);
return imageArray[imageNum];
}
function getPrevImage() {
// imageNum = (imageNum-1) % imageArray.length;//This is not correct
imageNum = (imageNum-1 >= 0) ? (imageNum-1) : (imageArray.length-1);
return imageArray[imageNum];
}
function prevImage() {
var image_item = getPrevImage();
place.src = place.alt = image_item.url;
}
function nextImage() {
var image_item = getNextImage();
place.src = place.alt = image_item.url;
}
function play() {
nextImage();
timerID = setTimeout(play, interval);
}
window.onload = function(){
place = document['slideImg'];
play();
};
</script>
</head>
<body>
<img name="slideImg" src="27.jpg" width="500" height="375" border="0"><br />
<a href="#" onclick="play()">Play slide show</a> |
<a href="#" onclick="clearTimeout(timerID)">Pause</a> |
<a href="#" onclick="clearTimeout(timerID); prevImage();">Previous</a> |
<a href="#" onclick="clearTimeout(timerID); nextImage();">Next</a>
</body>
</html>
好吧如果你想要 imageArray 成为一个图像网址数组，那么最简单的方法是：...
Well If you want imageArray to be an array of image urls, then the simplest way is: ...
function imageItem(url) {
var img = new Image();
img.src = url;
return url;
}
for(var i=0; i<5; i++){
imageArray[i] = imageItem(imageDir + i + ".jpg");
}
注意 imageItem 在这种情况下，在没有 new 的情况下调用。希望你现在能理解它。如果您对此代码有进一步的问题，请与我们联系。
Note how imageItem is called without new in this case. Hope you will understand it now. Let me know if you have further problem with this code.
这篇关于理解幻灯片脚本的难度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
