Flexible Banner Rotator

1. Introduction and Sample

Note that the above sample has the script swapping images. These images do not link anywhere. The below sample shows its use to rotate text. There is a sample near the bottom of this page of a more conventional rotating banner ad block. All of these are running from this one script.

This banner rotator script has been designed to make it as flexible as possible to add rotating banners to your page. You don't even need to use banners since the script will rotate any text or HTML that you use with it. The script is also flexible in that you can have as many rotators in your page as you like, each displaying different content (there are three completely different examples on this page). The only restriction that the script does apply is that when you have multiple instances in the same page, all of the content swaps occur at the same time. You do have the ability to change how long it is between changes.

This script uses an object called banners to contain all the content for each of the groups of content that you want to have rotated within your page. You add a property to this object for each group with the property name matching the id of the element in your HTML where that content is to be placed. The content itself is in an array that the property references. You don't need to understand how that works though just as long as you define the object containing all the content the same way I show in my example.

What I do recommend that you do is to ensure that the all of the entries that you place in an array result in content for your page that fills exactly the same space in the page. That way you don't have all the page content being rearranged each time the content updates.

Another thing that you will probably want to do, is to place a copy of one of the entries from your array actually inside the element that will be rotating the content from that array. That way any visitors who have JavaScript disabled will see something in each of those spots in your page even though the content doesn't dynamically change for them.

To actually use this script you are going to need to do several things yourself. We'll go through what you need to do one step at a time so that you can get everything set up. I'll start though by sumarising the steps so that you have a better idea of what it is you will need to do.

1. Attach the rotator script into your page
2. Add an element into your HTML where each rotator is to appear with an id that the script can use to identify it.
3. Add a property to the banners object containing an array of the different content to be rotated

Note that the script is flexible enough to work with content other than images but if you do use images the script will preload the first image referenced in each entry for you. Also note that the script will sort the entries in each array into random order for each visitor so that it doesn't matter what order you put things in each array as they will all have the same chance to be seen.

Note the below example shows more conventional banners that actually link to other pages (in this instance they link to pages on my own personal site).

If you want to be able to add one or more effects like this to your web page then the first thing you need to do is to obtain the script.

Apply now to guide this site

Discuss in our forum

• animation
• javascript and images