Question

我从网上拍了幻灯片剧本。但有些功能我无法理解这是脚本

<!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>

这里我完全不知道

的实际功能是什么

    get_ImageItemLocation(imageObj)

和

    imageItem(image_location)

这两个功能分别是什么？提前感谢您的关注

Answer 1

好的我明白了。我的代码有很多错误。

imageItem是一个用于预加载图像的构造函数。它返回它预加载的图像的src（位置）。

但是函数get_ImageItemLocation()假定imageItem已经返回了一个对象。

整个事情应简化为：

<!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>&nbsp;|&nbsp;
<a href="#" onclick="clearTimeout(timerID)">Pause</a>&nbsp;|&nbsp;
<a href="#" onclick="clearTimeout(timerID); prevImage();">Previous</a>&nbsp;|&nbsp;
<a href="#" onclick="clearTimeout(timerID); nextImage();">Next</a> &nbsp;

</body>
</html>

那么如果你想让imageArray成为一个图像网址数组，那么最简单的方法是：...

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的调用方式如何。希望你现在能理解它。如果您对此代码有进一步的问题，请告诉我。

理解幻灯片脚本的难度

1 个答案: