Hi, im looking for a rotation script. I have an events section on my site and i want the script to basically show an image and then underneath have the name and date underneath and then it rotate to the next event and so on, in total it needs to store around 5 events. I can only find scripts that rotate either the image or the picture and not the 2 together, ive tried running 2 seperate scripts but they either dont work together or they rotate at different speeds and i cant get it to work. Does anyone know of any FREE premade scripts at all? Cheers
Use the following, at least initially, with images that are 185w x 139h. It works in IE and FF <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Any Title</title> <script type="text/javascript"> var useWidth = "195"; // width of an image plus 10px, more or less; var pause = 3 // 3 seconds for each image; var speed = 7; // scroll speed, larger is faster; var images = []; images[0] = "<img src='images/Cleve1.jpg' alt=''>"; images[1] = "<img src='images/Cleve2.jpg' alt=''>"; images[2] = "<img src='images/Cleve3.jpg' alt=''>"; images[3] = "<img src='images/Cleve4.jpg' alt=''>"; images[4] = "<img src='images/Cleve5.jpg' alt=''>"; var caption = []; caption[0] = "Terminal Tower"; caption[1] = "Great Lakes Science Museum"; caption[2] = "Cleveland City Hall"; caption[3] = "Cleveland Browns Stadium"; caption[4] = "Rock and Roll Hall of Fame"; var nContainer = ""; var nImgs = 0; var n = 0; function buildImgStr(){ var imgStr = ""; for (i=images.length-1; i>-1; i--) { imgStr += images[i]+ "  "; } document.getElementById('crawl').innerHTML = imgStr; nContainer.scrollLeft = nContainer.scrollWidth - useWidth - 3; document.getElementById('caption').lastChild.data = caption[n]; if (n < caption.length-1){n++} else {n = 0} } function circleStr(){ var fifoImg = images[0]; for (i=1; i<images.length; i++) { images[i-1] = images[i]; } images[images.length-1] = fifoImg; buildImgStr(); setTimeout("startCrawl()",pause*1000); } function startCrawl(){ var currPos = nContainer.scrollLeft; if (currPos <= nContainer.scrollWidth - (2*useWidth)) { circleStr(); } else { nContainer.scrollLeft = currPos - speed; setTimeout("startCrawl()",100); } } function waitLoad(){ var t = 0; for (i=0; i<nImgs.length; i++) { if (nImgs[i].complete) { t++; } } if (t < nImgs.length) { setTimeout("waitLoad()",500) } else { startCrawl(); } } function init(){ nContainer = document.getElementById('container'); nContainer.style.width = useWidth+"px"; document.getElementById('holder').style.width = useWidth+"px"; buildImgStr(); nImgs = document.images; waitLoad(); } onload=init; </script> </head> <body> <br> <br> <br> <table align='center'> <tbody> <tr> <td align='center'> <div id='holder' style='border-right:1px solid black;border-top:1px solid black;margin:10px;border-left:1px solid black;border-bottom:1px solid black;background-color:#ffffe0'> <div id='container' style='overflow:hidden'> <div id='crawl' style='font-family:times;font-size:11pt;padding-right:0px;padding-left:3px;padding-bottom:3px;padding-top:3px;white-space:nowrap'> <img src='images/Cleve1.jpg' alt=""> </div> </div> <div id='caption' style='padding-right:3px;padding-left:3px;font-size:10pt;padding-bottom:3px;color:#00008b;padding-top:3px;font-family:arial;background-color:#00CED1;text-align:center'> Terminal Tower </div> </div> </td> </tr> </tbody> </table> </body> </html> Code (markup):