1. Computing

Flexible Banner Rotator

4. What to Rotate

The final step in setting up your flexible rotating banners is to add the content for each rotator into the appropriate arrays. In the code you have downloaded there are placeholders in the array that just contain single character strings. All that you need to do is to substitute your content for each of those placeholders.

For example here is the banner1 rotator defined to use three images:

banner1 : ['<img src="pic1a.gif" width="50" height="50"
continued from previous line border="0" alt="Cycling banner image one" \/>'
,'<img src="pic2a.gif" width="50" height="50" border="0"
continued from previous line alt="Cycling banner image two" \/>'
,'<img src="pic3a.gif" width="50" height="50" border="0"
continued from previous line alt="Cycling banner image three" \/>'
]
, banner2 :

Your content can be either plain text of can contain HTML. To set up a standard banner rotator where you display a series of banners where each banner is a link to a different page your code would consist of an =<img> tag nested inside an <a> tag. Just make sure to enclose the image filenames in either single or double quotes so that the script can find the filenames and preload the images for you.

Whatever you use as your rotating elements, the content goes inside the single quotes in place of the single letter that I used in the script that you copied.The only change you need to make with your content compared to if you were inserting it directly into the web page is that every shash and single quote in your content needs to be preceded by a backslash (so \' and \/ instead of just ' and / - this ensures that the browser doesn't get confused about where this content or the entire script ends - note that's \ followed by / and not a V).

If you need more elements than in my example you just add extra lines starting with a comma and with your extra content contained in single quotes. The content for each rotator can be the same sort of thing or it can be completely different (as on my sample page) although you really want the entries in the one rotator to all take up the same space so give each type of content its own separate rotator.

There is no requirement that the rotators have the same number of entries in them as each rotator keeps track of which entry it is up to and will cycle through however many there are before starting to repeat. By placing different numbers of entries in each rotator you provide for a larger combination of entries to be displayed before it gets back to the first combination (so if one rotator contains five entries and a second contains 4 then there will be 20 different combinations that will be displayed before getting back to the first one).

The script automatically sorts each list of entries into random order each time the page loads and so the order that one visitor sees the entries in your rotator in will not necessarily be the same as another visitor will see. This will help to keep the displays of the different content as even as possible for you regardless of how long people stay on the page and will also provide a bit more variety for repeat visitors who will not see the exact same entries on the page at the start of their next visit.

Hopefully this rotator will fulil many of your requirements for dynamically changing content in your web page.

©2013 About.com. All rights reserved.