Flexible Banner Rotator

2. Obtain the Script

More of this Feature

Introduction Where in the Page What to Rotate

To add the any of the effects possible with the flexible banner rotator to your web page you first need to select the code from the text box below (there is a highlight all button beneath it to make this easier) and copy it into a file called banner.js.

var banDelay = 5000; // display for 5.000 seconds each
var banners = {
banner1 : ['a'
,'b' 
,'c'
]
, banner2 : ['1'
,'2'
,'3'
,'4'
,'5'
]
};

// Banner Rotator
// copyright 12th October 2009 by Stephen Chapman
// http://javascript.about.com
// permission to use this Javascript on your web page is granted
// provided that all of the code below in this script (including these
// comments) is used without any alteration
var banimg = []; for (x in banners) {for (var i=banners[x].length-1; i >= 0; i--) {var b = banners[x][i].match(/<img.+?src=['"](.*?)['"]/);if (b) banimg.push(b[1]);}} for (var i = banimg.length - 1; i >= 0; i--) {var h = new Image(); h.src = banimg[i];}
function randOrd(){return (Math.round(Math.random())-0.5); }
var banlist = [];function Ban(b) {this.loc = document.getElementById(b);this.ary = banners[b];this.ary.sort(randOrd);this.cnt = -1;banlist.push(this);}function rotateBan() {for (var j = banlist.length - 1; j >= 0; j--) {var max = banlist[j].ary.length;banlist[j].cnt++;if (banlist[j].cnt >= max) banlist[j].cnt = 0;banlist[j].loc.innerHTML = banlist[j].ary[banlist[j].cnt];}setTimeout(rotateBan,banDelay);} function startBanner() {for (x in banners) {if (document.getElementById(x)) new Ban(x);} rotateBan();}

window.onload = startBanner;

The next step is to add the script into the head of your page or to the bottom of the foot of your page (whichever you prefer) using the following code:

The code at the top of the script (above the copyright notice) is the part of the script that you need to change to set up whatever it is that you want to rotate in your page. The banDelay is the time in milliseconds that all the entries will display for so the default 5000 means that each displays for five seconds before being replaced with the next.

So now we have the script in your page, the next step is to define where in our web page the rotating code is to be inserted.

Apply now to guide this site

Discuss in our forum

A part of The New York Times Company.