We have so many sideshow available, The below also explains the same with some simple steps and with one java script method setTimeout).
This makes our work so simple to rotating the images.
<html>
<head>
<titleA Timed Slide Show</title>
<script type = "text/javascript">
var the_images = new Array();
the_images[0] = new Image();
the_images[0].src = "one.jpg";
the_images[1] = new Image();
the_images[1].src = "two.jpg";
the_images[2] = new Image();
the_images[2].src = "three.jpg";
var the_timeout;
function rotateImage(index)
{
window.document.my_image.src = the_images[index].src;
index++;
if (index >= the_images.length)
{
index = 0;
}
var the_function_string = "rotateImage(" + index + ");";
the_timeout = setTimeout(the_function_string, 1000);
}
Timing Events 165
</script>
</head>
<body>
<img name = "my_image" src = "one.jpg">
<form>
onClick = "clearTimeout(the_timeout);">
</form>
</body>
</html>
Code Explaination:
The first few lines set up the array containing the images we’ll put in the slide
show. Line creates the new array, sets the first item in the array equal to
an image object, and sets the src of that image object to the first picture of
the slide show. Lines and are just like the lines used to preload images
before an image swap. The next few
lines load the rest of the images.
After the images have loaded, and set up two variables for use in the
timing loop. Line declares the_timeout, which keeps track of each time-out,
and keeps track of which image in the slide show to bring up next time the
script calls rotateImage(). Keep in mind that declaring the index variable
outside the rotateImage() function, as I’ve done here in , is not the safest
programming practice—it’s just easier and quicker than the safe solution.
A safer version of rotateImage() will be described subsequently.
Next comes the rotateImage() function, which swaps in a new image and
then calls itself in one second. The first line of the function does the
image swap. It looks up the value of index, finds the src of the element numbered
index in the the_images array, and swaps in that image for my_image (the
image in).
After swapping the image, the function adds 1 to the index variable. The
next time rotateImage() gets called, it looks up the next item in the array and
swaps in that item. We have to make sure the number stored in index doesn’t
exceed the number of images stored in the the_images array. The if-then
statement starting in takes care of this issue by ensuring that if index has
incremented past the number of items in the array, it will be set back to 0
(corresponding to the first image in the the_images array). The last line in the
function should be old hat by now. This line sets a time-out to call the
rotateImage() function in one second.
Timing Events 163
The slide show starts when a visitor presses the button that calls
rotateImage() and ends when the user presses the Stop the Show button,
canceling the most recently set time-out.
No comments:
Post a Comment