| <<< Home | << Web | < Rollovers | Top | Bottom | < Prev | Next > |
You can use these links to scroll to individual topics
Code in the <head> section
The <body> tag
The slide show
For this simple slide show, we're going to use a new function: changeIt(). We also need the preloadImg() function to preload the images. The code for preloading the images looks like the code we used in the manual slide show, with image objects are defined in an array. We also need a several variables: giIndex for keeping track of which image is currently displayed, giDelay to hold the time delay between images, and gTimeId to hold the current timer ID.
<script language="javascript" type="text/javascript"> <!--
//====================================================
// preloadImg() - Preloads an image
//
// Argument: String containing URL of image to preload
// Returns: Image object created for the image
// Author: Larry Coats
//====================================================
function preloadImg (zsUrl)
{
// Prevent alerts in IE 3 and Netscape 2
if (!document.images) return null;
// Create an image object and preload the image
var xo = new Image(); // Create the image object
xo.src = zsUrl; // Set URL - Preloads
return xo; // Return the image object
}
//====================================================
// changeIt() - Display next slide show image
//
// changeIt() is called from the onload handler of the
// body tag. It sets a timer that causes changeIt() to
// be called again after the requested delay.
//
// Arguments: None
// Global variables:
// giIndex Index of current image
// giDelay Delay between sides (1000 = 1 sec)
// gTimeId Timer ID
// Author: Larry Coats
//====================================================
function changeIt ()
{
// Prevent alerts in Netscape 2 and IE 3
if (!document.images) return;
// Compute index of next image
if (++giIndex >= gmArr.length) giIndex = 0;
// Display the next image
document.imShow.src = gmArr[giIndex].src;
// Set timer to call changeIt() again after requested delay
gTimeId = setTimeout("changeIt();", giDelay);
}
//====================================================
// Global variables for slide show
//====================================================
var giIndex = 0; // Current image
var giDelay = 3000; // Delay time: 1000 = 1 sec
var gTimeId = 0; // Timer ID
//====================================================
// Preload images for slide show
//====================================================
var gmArr = new Array();
gmArr[0] = preloadImg ("sea.jpg");
gmArr[1] = preloadImg ("sea01.jpg");
gmArr[2] = preloadImg ("sea02.jpg");
gmArr[3] = preloadImg ("sea03.jpg");
gmArr[4] = preloadImg ("sea04.jpg");
gmArr[5] = preloadImg ("sea05.jpg");
gmArr[6] = preloadImg ("sea06.jpg");
gmArr[7] = preloadImg ("sea07.jpg");
gmArr[8] = preloadImg ("sea08.jpg");
//--> </script>
To get the slide show started, we add an onload to the <body> tag. onload makes the first call to changeIt(), which changes to the next image in the slide show and then arranges to have itself called again when it's time to change to the next image.
<body ... onload="changeIt();">
This slide show is an automated slide show with no controls for the user to interact with. Once the page is fully loaded, the slide show begins automatically. The user cannot speed it up, slow it down, or pause it. This type of slide show is most useful for a banner recycler.
This slide show consists of nine images. The URLs of the images are in the gmArr array that's created in the preload code shown above. The slide show begins with the first of the images, which is also specified in the <img> tag. The variable giIndex contains a value that ranges from 0 through 8, and keeps track of which of the images is currently displayed.
When the page is fully loaded, the onload in the <body> tag triggers the first call to changeIt(). This function shows the next image and then arranges to have itself called again after delaying for 3 seconds.
<img src="sea.jpg" width="320" height="240"
id="imShow" name="imShow" alt="Slide show" />
We don't need to use any onmouseover/onmouseout/etc, so we don't need to put an <a href> around our <img> tag. All of the image changing is done in changeIt(), which gets kicked off by the onload and then carries on by itself.
| <<< Home | << Web | < Rollovers | Top | Bottom | < Prev | Next > |