- 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.
)
)
)
...the final image. Once the page loads and the banner begins cycling, the animation continues with no user intervention required.
Listing 4.14 The HTML loads the first image in the cycling banner; the JavaScript handles the rest.
<!DOCTYPE html>
<html>
<head>
<title>Cycling 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>
Listing 4.15 You can use JavaScript to cycle between images in a banner.
window.onload = rotate;var theAd = 0;var adImages = new Array("images/reading1.gif","images/reading2.gif","images/reading3.gif");function rotate() {theAd++;if (theAd == adImages.length) {theAd = 0;}document.getElementById("adBanner").src = adImages[theAd];setTimeout(rotate, 3 * 1000);}
To create cycling banners:
-
var theAd = 0; var adImages = new Array("images/reading1.gif", "images/reading2.gif", "images/reading3.gif");Our script starts by creating theAd, which is given its beginning value in this code. 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.
function rotate() {We start off with a new function called rotate().
theAd++;
Take the value of theAd, and add one to it.
if (theAd == adImages.length) { theAd = 0;This code checks to see if the value of theAd is equal to the number of items in the adImages array; if it is, then set the value of theAd back to zero.
document.getElementById("adBanner").src = adImages[theAd];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 theAd defines which of the three GIFs the browser should use at this moment.
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 3000 milliseconds, or every 3 seconds, so the GIFs will cycle in the banner every three seconds.