<html>
<head>
<script type="text/javascript">
/*
The first thing we want to do is load image ojects. You weren't
loading any actual images in the code, just setting properties of
array elements that didn't know they were supposed to be images.
*/
// Declare the array
var images = new Array(5);
// Create the image objects
images[0] = new Image();
images[1] = new Image();
images[2] = new Image();
images[3] = new Image();
images[4] = new Image();
// Assign each image to it's own slot. These will never change, each
// image is where it is going to be. We cycle in a minute.
images[0].src ="images/adImage1.jpg"
images[1].src ="images/adImage2.jpg"
images[2].src ="images/adImage3.jpg"
images[3].src ="images/adImage4.jpg"
images[4].src ="images/adImage5.jpg"
// Declare the output element
var outElm;
// Declare the current image index. This is our counter for the
// looping
var currentImageIndex = 0;
// Define the outer limit for the loop. If we get to the end, we want to
// swing back around to the front.
var maxImageIndex = images.length-1;
// This is the function that does all the heavy lifting.
function cycle(){
// verify that the output element exists before proceeding (no embarrassing
// javascript errors is a good thing)
if (outElm) {
// change the source of the output image to the current image
// (this will be 0 on the first iteration, which is adImage1
outElm.src = images[currentImageIndex].src;
// Increment the looping counter
++currentImageIndex;
// Check with the loop sentinel to make sure we're not going to go
// out of bounds
if (currentImageIndex > maxImageIndex) {
// if we're at the end, start over.
currentImageIndex = 0;
}
}
} // cycle
// This function just does a little safeguarding for us.
function initImageCycler(elmID){
// here, we load the display element
outElm = document.getElementById(elmID);
// and here, we don't start cycling unless it's valid.
if (outElm) {
setInterval("cycle()", 5000);
}
} // initImageCycler
</script>
</head>
<!-- All that's left now is to fire it up, and name the image in the DOM -->
<body onload="initImageCycler('adBanner');">
<img src="images/adImage1.jpg" id="adBanner" height="72px" width="500px" />
</body>
</html>