- Creating Rollovers
- Creating More Effective Rollovers
- Building Three-State Rollovers
- Triggering Rollovers from a Link
- Making Multiple Links Change a Single Rollover
- Working with Multiple Rollovers
- Creating Cycling Banners
- Adding Links to Cycling Banners
- Building Wraparound Slideshows
- Displaying a Random Image
- Cycling Images with a Random Start
This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating Cycling Banners
When you surf the Web, it’s common to see advertising banners that periodically switch between images. Some of these are animated
GIF files, which are GIF files that contain a number of frames that play in succession; others are Flash animations. If you
want to have a page that cycles through a number of GIFs (either animated or not), you can use JavaScript to do the job, as
in Listing 4.15. This example uses three GIFs and cycles repeatedly through them, as shown in 
, 
, and 
. The simple HTML page is shown in Listing 4.14.
)
)
)
To create cycling banners:
- var thisAd = 0;
Our script starts by creating thisAd, which is given its beginning value in this code.
function rotate() { var adImages = new Array("images/reading1.gif","images/reading2.gif","images/reading3.gif");We start off with a new function called rotate(). The next line creates a new array called adImages. In this case, the array contains the names of the three GIF files that make up the cycling banner.
- thisAd++;
Take the value of thisAd, and add one to it.
if (thisAd == adImages.length) { thisAd = 0;This code checks to see if the value of thisAd is equal to the number of items in the adImages array; if it is, then set the value of thisAd back to zero.
- document.getElementById("adBanner").src = adImages[thisAd];
The image on the Web that is being cycled has the id adBanner; you define the name as part of the img tag, as shown in Listing 4.14. This line of code says that the new sources for adBanner are in the array adImages, and the value of the variable thisAd defines which of the three GIFs the browser should use at this moment.
Listing 4.14. The HTML loads the first image in the cycling banner; the JavaScript handles the rest.
<!DOCTYPE html> <html> <head> <title>Rotating Banner</title> <script src="script07.js"></script> <link rel="stylesheet" href="script01. css"> </head> <body> <div class="centered"> <img src="images/reading1.gif" id="adBanner" alt="Ad Banner"> </div> </body> </html> - setTimeout(rotate, 3 * 1000);
This line tells the script how often to change GIFs in the banner. The built-in JavaScript command setTimeout() lets you specify that an action should occur on a particular schedule, always measured in milliseconds. In this case, the function rotate() is called every 3,000 milliseconds, or every 3 seconds, so the GIFs will cycle in the banner every three seconds.
Listing 4.15. You can use JavaScript to cycle between images in a banner.
window.onload = rotate;var thisAd = 0;function rotate() {var adImages = new Array("images/reading1.gif","images/reading2.gif","images/reading3.gif");thisAd++;if (thisAd == adImages.length) {thisAd = 0;}document.getElementById("adBanner").src = adImages[thisAd];setTimeout(rotate, 3 * 1000);}