Rotates a series of images on the page every few seconds. The images can easily be changed, and the script can be modified to rotate the images randomly or in order.
Step 1: Add the below code to the <body> section of your page:
<scriptlanguage="javascript"type="text/javascript"> /* Visit http://www.yaldex.com/
for full source code
and get more free JavaScript, CSS and DHTML scripts! */
<!-- Begin var
interval =1.5;// delay between rotating images
(in seconds) var
random_display =1;// 0 = no, 1 = yes interval *=1000;
var
image_index =0; image_list =newArray(); image_list[image_index++]=new
imageItem("toad.jpg"); image_list[image_index++]=new
imageItem("chameleon.jpg"); image_list[image_index++]=new
imageItem("lizard.jpg"); image_list[image_index++]=new
imageItem("gecko.jpg"); var
number_of_image =
image_list.length; function
imageItem(image_location){ this.image_item
=newImage(); this.image_item.src=
image_location;
} function
get_ImageItemLocation(imageObj){ return(imageObj.image_item.src)
} function
generate(x,y){ var
range =y-x+1; returnMath.floor(Math.random()*
range)+x;
} function
getNextImage(){ if(random_display){ image_index =
generate(0,
number_of_image-1);
} else{ image_index =(image_index+1)%
number_of_image;
} var
new_image =
get_ImageItemLocation(image_list[image_index]); return(new_image);
} function
rotateImage(place){ var
new_image =
getNextImage(); document[place].src=
new_image; var
recur_call ="rotateImage('"+place+"')"; setTimeout(recur_call,
interval);
} function
Go()
{ rotateImage('rImage');
} window.onload=Go; // End --> </script> <center> <imgname="rImage"src="toad.jpg"width=330height=190> </center>
Step 2: The script uses 4 images as part of its interface. You can create your own, or use the 4 below (resized for easier download):
(right click images, and select "Save Image As")
Upload them into the same directory as your webpage.