Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Ajax and JavaScript

  • Print
  • + Share This
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 Script 4.13. This example uses three GIFs and cycles repeatedly through them, as shown in Figures 4.10, 4.11, and 4.12. The simple HTML page is shown in Script 4.12.

Figure 4.10

Figure 4.10 The first image, which starts the cycling banner...

Figure 4.11

Figure 4.11 ...the second image...

Figure 4.12

Figure 4.12 ...the final image. Once the page loads and the banner begins cycling, the animation continues with no user intervention required.

To create cycling banners:

  1. var thisAd = 0;

    Our script starts by creating thisAd, which is given its beginning value in this code.

  2. 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.

  3. thisAd++;

    Take the value of thisAd, and add one to it.

  4. 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.

    Script 4.12. The HTML loads the first image in the cycling banner; the JavaScript handles the rest.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    → Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/
            → xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
         <title>Rotating Banner</title>
         <script type="text/javascript"
         → src="script07.js"></script>
    </head>
    <body bgcolor="#FFFFFF">
         <div align="center">
            <img src="images/reading1.gif"
            → width="400" height="75" id="adBanner"
            → alt="Ad Banner" />
         </div>
    </body>
    </html>

    Script 4.13. 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);
    }
  5. 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 Script 4.12. 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.

  6. 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.

  • + Share This
  • 🔖 Save To Your Account