JAVASCRIPT RANDOM IMAGE ROTATOR

Lesmond · March 23, 2007, 05:14:13 PM

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.
Alter the code to point to your images/folder, then copy the code in to a Script block

you can add/remove more images by add more lines of this code...

Code Select

image_list[image_index++] = new 
imageItem("http://www.yoursite.com/path-to-img/your-img.jpg");

I have added More instructions in code, between these

Code Select

<SCRIPT LANGUAGE="JavaScript">

<!-- Original:  Robert Bui (astrogate@hotmail.com) -->
<!-- Web Site:  http://astrogate.virtualave.net -->

<!-- Begin
var interval = 2.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();
<!-- Alter each of these to point to your image -->
image_list[image_index++] = new 
imageItem("http://www.yoursite.com/img/img1.jpg");
image_list[image_index++] = new imageItem("http://www.yoursite.com/img/img2.jpg");
image_list[image_index++] = new imageItem("http://www.yoursite.com/img/img3.jpg");
image_list[image_index++] = new imageItem("http://www.yoursite.com/img/img4.jpg");
<!-- You can add your images to this list -->
<!-- By copying the code and making a new line -->
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);
}
//  End -->
</script>

<BODY OnLoad="rotateImage('rImage')">


<!-- This must be the first image on your list! -->
<center>
<img name="rImage" src="http://www.yoursite.com/img/img1.jpg" width=120 height=90><!-- this is the size that your images will be displayed -->
</center>

IchBin · March 23, 2007, 05:48:39 PM

There's a big difference between Java and Javascript. You should probably specify that in your title Les.
Thanks for sharing bud. I like these types of things.

Lesmond · March 23, 2007, 06:02:20 PM

Thanks IchBin I have changed it

also the demo block was set not to show to guests,

I have changed it now

RoarinRow · March 23, 2007, 06:43:38 PM

Very cool, thanks! :up:

IchBin · March 23, 2007, 06:51:40 PM

Yes, it looks great. Nice work, and thanks for sharing!

MeRcChRiS · July 09, 2007, 09:36:27 AM

How can i make the images into links?

Crip · July 09, 2007, 09:51:07 AM

link'em e z

Crip · July 09, 2007, 09:55:08 AM

Quote from: IchBinÃ¢â€žÂ¢ on March 23, 2007, 05:48:39 PM
There's a big difference between Java and Javascript. You should probably specify that in your title Les.
Thanks for sharing bud. I like these types of things.

Exactly Boss,
Java and Applets I don't like)) -- javaScript and code I do like, it can do some amazing stuff.

Shade · July 10, 2007, 03:07:35 AM

Not Acceptable
An appropriate representation of the requested resource /gameon/forum/index.php could not be found on this server.

This message is show when i try to make the scriptbox.
Soembody know what is?
See ya!

Fus-sheva · July 13, 2007, 07:31:17 PM

Thanks!

Recent

User

Stats

Members

Stats

Users Online

JAVASCRIPT RANDOM IMAGE ROTATOR

Lesmond

IchBin

Lesmond

RoarinRow

IchBin

MeRcChRiS

Crip

Crip

Shade

Fus-sheva

This website is proudly hosted on Crocweb Cloud Website Hosting.