How to rotate an image or text with JavaScript & DHTML

by admin on July 24, 2009 · 0 comments

So I need to rotate an image every few seconds on a homepage of a site I'm building. I looked around for some pre-built code that I could do this with, and I found a few functions. I picked the one I like the best, and I've modified it to my needs. This JavaScript code lets you define an array of HTML items (so you could use images, text, links, you name it!), and loop through the array. I added the variable for you to define how many seconds between rotation. Here's the JavaScript function, it will run automatically on the page load event. Place it in between your <head></head> tags.

<script language="JavaScript1.2">

var howOften = 2; //number often in seconds to rotate
var current = 0; //start the counter at 0
var ns6 = document.getElementById&&!document.all; //detect netscape 6

// place your images, text, etc in the array elements here
var items = new Array();
    items[0]="<img src='monkey.gif' border='0'>"; //an image
    items[1]="<a href='#’><img src='monkey.gif' border='0'></a>"; //a linked image
    items[2]="Text without a link";
    items[3]="<a href='#’>Text with a link</a>";
    items[4]="<a href='#’><img src='monkey.gif' border='0'> Text and image with a link</a>";

function rotater() {
    if(document.layers) {
        document.placeholderlayer.document.write(items[current]);
        document.placeholderlayer.document.close();
    }
    if(ns6)document.getElementById("placeholderdiv").innerHTML=items[current]
        if(document.all)
            placeholderdiv.innerHTML=items[current];

    current = (current==items.length) ? 0 : current + 1; //increment or reset
    setTimeout("rotater()",howOften*1000);
}
window.onload=rotater;
//–>
</script>

Alternately, if you like simpler code, and you don't care about the .017% of users still using Netscape 6, you can use this JavaScript function for rotater:

function rotater() {
    document.getElementById("placeholder").innerHTML = items[current];
    current = (current==items.length-1) ? 0 : current + 1;
    setTimeout("rotater()",howOften*1000);
}

And here's the placeholder layers that you need to add to your HTML page to rotate the content in:

<layer id="placeholderlayer"></layer><div id="placeholderdiv"></div>

Tagged as: &, an, DHTML, How, image, Javascript, or, rotate, Text, to, with

Previous post:

Next post: