How to Do a Rotating Banner With CSS

By Kevin Lee

By employing principles used in digital animation, you can add rotating banners to your Web Pages. Third-party programs that generate rotating banners come in a variety of programming languages and technologies including Flash and jQuery. Since rotating banners are nothing more than images that change over time, you can use Cascading Style Sheets or CSS to produce this effect. Create a slow-motion animation by stacking multiple banners and making them appear every few seconds.

Step 1

Open a webpage document. Move to the document’s body section and add the following code at the location where you want your banner to appear:

image
image
This code creates a div container that holds your banner images. This div’s id attribute is “main.” The second div contains your first banner image. This div’s id attribute is “banner1.” Replace "INSERT BANNER URL/NAME HERE” with the URL of one of your banner images or the name of a file on your hard drive that contains a banner image.The second div holds your second banner image. This div’s id is “banner2.” Replace "INSERT BANNER URL/NAME HERE" with the URL or file name of another banner you would like to include on the Web page.

Step 2

Paste the code shown below into your documents head section:

This code creates the CSS class definition referenced by the image tags in the body. The class makes each image invisible by setting its display value to “none.”

Step 3

Add the following JavaScript code below the CSS code described in the last section:var bannerTimer;var bannerCounter = 0;var numberOfBanners;var firstPass = true;var previousBanner;var delay = 4;var banners = ["banner1", "banner2"];This JavaScript code sets values used by the function that cycles the images. Replace the value for delay with the number of seconds you would like your webpage deposit before changing banners. Note that the banners object contains the list of banner IDs set in the body section. Those IDs are “banner1” and “banner2.”

Step 4

Add the following JavaScript code below the code shown in the previous section:function startBanners() {var currentBanner = document.getElementById(banners[bannerCounter]);currentBanner.style.display = "block";if (firstPass == false) {previousBanner.style.display = "none";}firstpass = false;previousBanner = currentBanner;bannerCounter++;if (bannerCounter > (numberOfBanners - 1))bannerCounter = 0;var bannerTimer = setTimeout("startBanners()", delay * 1000);}window.onload = function () {numberOfBanners = banners.length;startBanners();firstPass = false;}The startBanners function executes repeatedly. The repetition frequency matches the value that you set in the delay variable. The function cycles through the banners object and makes each one visible by altering the object’s display value. Each time this function executes, it hides the banner that is visible and overlays it with the next banner image in the banner object. The window.onload function determines the number of duplex that you create in the body section and assigns a value to a variable named “numberOfBanners” variable. The window.onload function in triggers the startBanner function.

Step 5

Save the document. Launch your browser and open the document. The onload event begins and cycles through your banner images displaying them one by one.

Tips & Warnings

  • This example contains two banner images. Add more banners by adding more div blocks to the documents body section as shown previously. Each time you add a new div, give it a unique id name and the name to the banners object in the JavaScript code. For instance, if you added a third banner, you would create a third div and possibly name it “banner3.”
  • Your banners cycle in the order that you include them on the Web page.
  • CSS banners
  • rotate images CSS
  • JavaScript banner
  • HTML banners