How to rotate an image or text with JavaScript & DHTML
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.
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:
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:
Digg this
post to del.icio.us
on September 13th, 2007 at 11:39 am
Hmmm, I've implemented your code, but it doesn't seem to be working. Any ideas?
var howOften = 5; //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[1]=""; //a linked image
items[2]="";
items[3]="";
items[4]="";
items[5]="";
function rotater() {
if(document.layers) {
document.placeholderlayer.document.write(item[current]);
document.placeholderlayer.document.close();
}
if(ns6)document.getElementById("placeholderdiv").innerHTML=item[current]
if(document.all)
placeholderdiv.innerHTML=item[current];
current = (current==items.length) ? 0 : current + 1; //increment or reset
setTimeout("rotater()",howOften*1000);
}
window.onload=rotater;
//–>
on September 13th, 2007 at 11:44 am
Do you have any javascript error you can send over?
I see an error in my code though, the items array is referred to as item later on. I'll change my code, you can copy and paste the new one.
on September 17th, 2007 at 10:04 pm
Hello, i just want some help, i'm new with wordpress so, can you please tell me what code to use to put google's ads in the lift like yours?
thanks a lot ok.
on September 18th, 2007 at 11:28 am
Look for a wordpress plugin called Adsense deluxe
on October 17th, 2007 at 4:54 pm
Any chance there's an easy way to put additional placeholder layers on the webpage which could pull from the same script, but start at different points in the rotation?
The end result would be that all images are visible at one time, they'd just appear to cycle through different positions on screen.
Thanks in advance for any suggestions.
on October 17th, 2007 at 6:32 pm
Yes. You would have to just add the additional placeholders, and then create a loop which sets the inerHTML to the last called item + 1.
So, if there were 5 placeholders, the first gets the content for item[0], the second for item[1], etc. The next time through, the first gets the content for item[1], the second for item[2].
on October 18th, 2007 at 4:14 pm
Thanks Justin, I'll try that out. . . I haven't used JavaScript before, so this is all kind of new.
on December 11th, 2007 at 6:00 pm
After the items reach the end, I get "undefined" as a text string. I started by simply copying and pasting the example code above. Everything works except no matter what I do, "undefined" shows up at the end of the loop / after the last item. Thoughts?
on December 12th, 2007 at 8:10 am
If you send me the URL to check it out, maybe I could help you.
on January 26th, 2008 at 5:59 pm
the reason you get an undefined at the end is a slight misstep in the code. You are telling th script that current is either equal to 0 or itself+1. The length then runs to the end and repeats, however it is still adding 1 to the length when it is at the end ( in this case [4] ) and thus looking for [5]. All you have to do is edit the item.length to increment -1 as the total length.
This line:
current = (current==items.length) ? 0 : current + 1; //increment or reset
should be
current = (current==items.length-1) ? 0 : current + 1; //increment or reset
Enjoy
on April 28th, 2008 at 1:07 am
Hi,This works very nice, but how to avoid the flickering of image when i rotate the image
on June 16th, 2008 at 10:04 am
Can this code be altered to have the images rotate randomly? Thanks, Shannon
on July 14th, 2008 at 5:46 am
I think to add fade effect on this rotation to avoid images flickering, but so far I haven't figure out how to do that. I achieved fade effect only for text or only for images but not for both at the same time. If anybody knows how to fade images and text at the same time, please let us know.