How to Do a Rotating Banner With CSS

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

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:

Step

Step

image

Step

image

Step

Step

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

Paste the code shown below into your documents head section:

Step

Step

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

Add the following JavaScript code below the CSS code described in the last section:

Step

var bannerTimer; var bannerCounter = 0; var numberOfBanners; var firstPass = true; var previousBanner;

Step

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

Add the following JavaScript code below the code shown in the previous section:

Step

function startBanners() { var currentBanner = document.getElementById(banners[bannerCounter]); currentBanner.style.display = "block";

Step

if (firstPass == false) { previousBanner.style.display = "none"; } firstpass = false;

Step

previousBanner = currentBanner; bannerCounter++;

Step

if (bannerCounter > (numberOfBanners - 1)) bannerCounter = 0;

Step

var bannerTimer = setTimeout("startBanners()", delay * 1000); }

Step

window.onload = function () { numberOfBanners = banners.length; startBanners(); firstPass = false; }

Step

Step

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

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.