Home/ Questions/Q 6877751
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T04:38:20+00:00

I have taken slide show script from net. But There some functions i cannot

  • 0

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)

and

    imageItem(image_location)

what does these two functions seperately?
Thanks in advance for attention

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok I figured it out. My code had many errors.

    imageItem is a constructor function designed to preload images. It returns the src (location) of the image that it preloads.

    However the function get_ImageItemLocation() assumes that imageItem has returned an object.

    The whole thing should simplify to:

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

    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");
}

    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.

    • 0