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.
<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>
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.
on October 24th, 2008 at 10:39 am
Thank you for this code, I have found it very helpful. I have used it on the home page of a website I work on for a university. However, I am running into the same problem someone else has mentioned with "undefined" appearing at the end of the rotation. I used the change in code which you mentioned, and I have no errors, but am still seeing the "undefined" at the end of the rotation. Any ideas?
on January 5th, 2009 at 5:21 am
Thank you for this code….it's very nice and works fine.
Keep it up
on January 7th, 2009 at 4:44 am
First of all Thanks Justin for this awesome piece of work!!
about the flickering of the image : It happens when you try to load a bigger image in a smaller area.. e.g if you are trying to fit a image of size 1000*500 in a 200*100 area, the flicker occurs. At least this is what i experienced and solved it by using proper size image
about the 'undefined' error, the solution provided by BLIZZ is perfect. If u guys still have that error then please check the array if they are named in proper sequence..
the code is almost perfect.
on January 26th, 2009 at 6:09 am
I want to use "2" image rotator in same page… but unable to do so with your code.. Please help.. single is working fine…
on February 2nd, 2009 at 2:39 pm
Hi Justin, thanks for the script! I was just wondering if it was possible to add a fade in, fade out effect to this? Someone mentioned above that they kinda figured it out but didnt give the code… thanks!
on February 5th, 2009 at 12:50 am
thanx for this code, it works very well. did any of you add fade effect to the text? it will make the transition more fluid in relaxing for the eyes. if u have, please post.
cheer!
on February 10th, 2009 at 7:35 am
Hi guys.
Everything works corectly, but I want to have separated placeholderdiv in different parts on my singular page of my website. Is it possible?
on March 27th, 2009 at 7:27 am
Thanks for this.
I'd tried to do something similar but ended up getting stuck in a recursive loop – your Array idea solved the problem a treat!
on April 23rd, 2009 at 7:57 am
Hi All
I would like to put the google ads script in the place of text content like
items[5]="–google Ads script–";
when i try to do this it's through the Error as below
———————————————————————–
"; 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;
————————————————————————
anybody help me
Thanks in Advance
on May 31st, 2009 at 3:50 pm
If someone knows how to have the text (don't need images) rotate and fade can you post the code or send it to me. Much appreciated! Thanks
on June 23rd, 2009 at 3:17 pm
Excellent script. It worked 3rd time round after removing the typos I made!
on November 18th, 2009 at 6:08 am
i want code for rotating a word or some text around fixed axes in clock wise direction. can you able to help me out…?