Rotating images and text

2011-06-23

An answer to this question on Stack Overflow.

Question

I want to have an image with it's corresponding block of text rotating every few seconds on my website. Just like these guys http://hellofisher.com/

I know I can get a javascript to rotate the images but I haven't found where I can have the block of text alongside rotating to suit the images.

Answer

You could try:

JAVASCRIPT

var imagelist = ["IMAGE1","IMAGE2","IMAGE3"]
var textlist = ["TEXT1","TEXT2","TEXT3"];
counter=0;
countmax=3;
var next = function(){
    $('rotating_image').innerHTML="<img src=\"" imagelist[counter%countmax] + "\">";
    $('rotating_text').innerHTML=textlist[counter%countmax];
    countmax++;
}
var rotate = window.setInterval(next, SECONDS * 1000);

HTML

<span id="rotating_image"></span>
<span id="rotating_text"></span>