Rotating image

[David Nixon]

Hello all,

I've added a rotating image on my site. I'm very new to webdesign, but battling through slowly. I was wondering if anybody can help me with adding some code to make the images rotate more smoothly. Maybe slide of fade. Not sure on your opinions.

Site: www.midlandsreptiles.com

JS:

<script language="JavaScript1.2">

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();


// ---------------------------------------------------- Below is the code of the rotating javascript images---images are saved on a seperate midlandsreptiles page and linked---------




items[0]="<img alt='image0 (9K)' src='http://midlandsreptiles.com/Rotating_javascript.htm/1.jpg' height='290' width='432' border='1px' /></a>"; //a linked image
items[1]="<img alt='image1 (9K)' src='http://midlandsreptiles.com/Rotating_javascript.htm/2.jpg' height='290' width='432' border='0' /></a>"; //a linked image
items[2]="<img alt='image2 (9K)' src='http://midlandsreptiles.com/Rotating_javascript.htm/3.jpg' height='290' width='432' border='0' /></a>"; //a linked image


<!---------------------------------------------------------end of image link code---------------------------------->


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

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-1) ? 0 : current + 1; //increment or reset
setTimeout("rotater()",howOften*1000);
}
window.onload=rotater;
//-->
</script>



The html:

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



Thanks in advance - please be basic with your answers

Dave

 

[JakClark]

To achieve a sliding effect would require a different plugin. I wouldn't bother even attempting to re-use this particular image rotator because it is so, so old. Old enough to be using deprecated code (the <layer> tag should be replaced with an absolutely positioned <div>).

I would highly recommend giving it a Google (terms such as: "free jquery image slider", or "top jquery sliders") if I'm perfectly honest. If you struggle to find an appropriate script, please refer back to this thread!

 

[leroy30]

Here's what you want... http://jquery.malsup.com/cycle/

 

[Phreaddee]

netscape 6?