Here is a little script I wrote that will do the trick... It does more than rotate because it fades in and out, but you can always set the number of steps to 1 and the hide gap to 0 to get a straight image swap.
You can build up an array of the images and preload them like I do in the head, then use that array as the images to rotate.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<title>Untitled Document</title>
<script>
function fade(ImgID,ImgArray,StartAt, Steps, StartPos, Direction, Gap, ShowGap, HideGap){
Steps=(Steps<1 || Steps>100)?15:Math.round(Steps);
Gap=(Gap<1)?75:Math.round(Gap);
ShowGap=(ShowGap<1)?75:Math.round(ShowGap);
HideGap=(HideGap<1)?75:Math.round(HideGap);
if(StartAt==ImgArray.length){
StartAt=0;
}
var ImgObj = document.getElementById(ImgID);
ImgObj.src=ImgArray[StartAt];
m=Math.round(StartPos/Steps*100);
ImgObj.style.filter="alpha(opacity="+m+")";
ImgObj.style.MozOpacity=m/100;
ImgObj.style.Opacity=m/100;
StartPos+=(Direction=="in")?1:(-1);
if(StartPos==Steps+1){
StartPos-=2;
Direction="out";
setTimeout("fade('"+ImgID+"',Array('"+String(ImgArray).replace(/,/g,"','")+"'),"+StartAt+","+Steps+","+StartPos+",'"+Direction+"',"+Gap+","+ShowGap+","+HideGap+")",ShowGap);
}
else if(StartPos<=0){
StartPos =0;
Direction="in";
StartAt++;
setTimeout("fade('"+ImgID+"',Array('"+String(ImgArray).replace(/,/g,"','")+"'),"+StartAt+","+Steps+","+StartPos+",'"+Direction+"',"+Gap+","+ShowGap+","+HideGap+")",HideGap);
}
else {
setTimeout("fade('"+ImgID+"',Array('"+String(ImgArray).replace(/,/g,"','")+"'),"+StartAt+","+Steps+","+StartPos+",'"+Direction+"',"+Gap+","+ShowGap+","+HideGap+")",Gap);
}
}
// create image array
var img_array=new Array();
img_array[0]="image/page_00.jpg";
img_array[1]="image/page_01.jpg";
img_array[2]="image/page_02.jpg";
img_array[3]="image/page_03.jpg";
img_array[4]="image/page_04.jpg";
img_array[5]="image/page_05.jpg";
// preload images
var myimages = new Array();
for (x=0; x<img_array.length; x++){
myimages[x] = new Image();
myimages[x].src = img_array[x];
}
// set arguments
var imageID = "fader";
var steps=1; // How many steps would you like for fading?. Max is 100, min is 1.
var gap=75; // How long would you like the delay between each frame (in 1/1000 ths of a second)? Min is 1, max should be no more than 10000 (10 seconds).
var show_img_gap=3000; // How long would you like to show the image for before it starts to fade out again.
var hide_img_gap=0; // How long would you like to hide the image for before it starts to fade in again.
n=steps;
img_num=0;
fading="out";
var secondimageID = "secondfader";
secondimg_num=3;
</script>
</head>
<body onload="setTimeout('fade(imageID,img_array,img_num,steps,n,fading,gap,show_img_gap,hide_img_gap)',show_img_gap); setTimeout('fade(secondimageID,img_array,secondimg_num,steps,n,fading,gap,show_img_gap,hide_img_gap)',show_img_gap)">
<img id="fader" src="image/page_00.jpg" />
<img id="secondfader" src="image/page_02.jpg" />
</body>
</html>
Did this help? Tips are appreciated...
