[IMAGE] IU SLIS logo

Demo page logo

Javascript

This is a display of rotating banners

Here is the script that makes it work

The script is in two parts. The first part is in the <head> of the document. The second part is in the <body>

The script that provides the browser with the instructions that allow it to pre-load the images, order the rotation, and set the timing is in the <head> of the document.

<script language=javascript type="text/javascript">
<!-- Hide script from old browsers

adImages = new Array (

"image1.gif",
"image2.gif",
"image3.gif",
"image4.gif"
)
thisAd=0

imgCt = adImages.length

function rotate() {

if (document.images) {
thisAd++
if (thisAd == imgCt) {
thisAd = 0
}
document.adBanner.src=adImages[thisAd]
setTimeout("rotate()", 3 * 1000)
}
} //End hiding script from old browsers -->
</script>

Here's what appears in the <body> tag to set the rotation in motion:

<body bgcolor="#ffffff" onload="rotate()">

Here's what appears in the <body> of the document:

<img src="image1.gif" Name="adBanner">

Here are the images

You can download these to make your own rotating image banner:

1st image
2nd image
3rd image
4th image

If you decide to make your own images, a hint is to make them all the same size. That way there will be no distortion or loss of resolution when the images rotate

Return to Javascript for home use.

Page by Howard Rosenbaum
Find me at hrosenba@indiana.edu http://www.slis.indiana.edu/hrosenba/www/Demo/rotating.html