Graphic >>> Random Image Rotator.
 
Script Categories













Graphic >>> Random Image Rotator.

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:

<script language="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 = new Array();
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 = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function generate(x, y) {
var range = y - x + 1;
return Math.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>
<img name="rImage" src="toad.jpg" width=330 height=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.

JavaScript Editor Get Advanced
JavaScript and Ajax Editor,
Validator and Debugger!

1st JavaScript Editor.



Code was highlighted by 1st JavaScript Editor (The Best JavaScript Editor!).




©