Rotating Text and Images

I have written a number of scripts over the years that can swap the content of parts of your page for you. The earliest version simply selected a piece of text or an image at random and inserted it into the page. The next version swapped the content every so often.

This version is a rewrite of my 2009 version to move the script to the bottom of the page, replace the biased array random sort with a proper unbiased array shuffle, make the script completely unobtrusive except for the one object where you define all your banner content, and is the first script I am offering for people to copy that uses strict JavaScript.

This script will allow you to "rotate" any content you like in as many spots as you like within the page and where the content contains images will pre-load all of those images so as to avoid any unnecessary delays in swapping them in the page.

The working example contains code to rotate the content in two places in the web page - in the example identified by their having an associated id of "banner1" and "banner2" respectively. The code that identifies what values to substitute there is:

var Banners = {
banner1 : ['Peter Piper picked a peck of pickled peppers.'
,'She sells sea shells by the sea shore.'
,'Simple Simon met a Pieman going to the fair.'
, banner2 : ['<img src="pic1a.gif" width="50" height="50" border="0" alt="Cycling banner image one"/>'
,'<img src="pic2a.gif" width="50" height="50" border="0" alt="Cycling banner image two"/>'
,'<img src="pic3a.gif" width="50" height="50" border="0" alt="Cycling banner image three"/>'
] }

To use the script to swap as many parts of the page as you like with whatever content you like you just put the id before the colon and the list of what all the values are as an array after it. Where the code contains src=" or src=' the value immediately after that will be assumed to be an image to be reloaded. The only other thing in the code you might want to change is the number in the last line that represents the time in milliseconds between swaps.

To use the script all you need to do is to download the script, update it to reference the ids in your page you want it to work with and then attach it to the bottom of your web page.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow