/    Sign up×
Community /Pin to ProfileBookmark

Need a good image rotator script.

Copy linkTweet thisAlerts:
Nov 11.2006

I’m looking for an image rotator javascript to display a under construction page that im working on for a friend. We have 16 images to work on so far and want to use a script that displays a new image whenever someone visits the page, and on a timed change. Any info is appreciated.

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@GirasquidNov 11.2006 — Here's an idea:

Store the paths to all of the images inside an array. Then, in the onload attribute of the <body> tag, call a function that sets the src attribute of an <img> tag to arrayName[randomNumber]. Then, at the end of that function, use setTimeout to make sure that the function gets called again in however many milliseconds.
Copy linkTweet thisAlerts:
@BigadrianauthorNov 12.2006 — Found and implemented a script, my only issue is that the original src pic always shows up for a sec before switching to the new one. Is there a way to modify the code so the original pic is random and does not display before changing?

<html>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- Original: Robert Bui ([email protected]) -->

<!-- Web Site: http://astrogate.virtualave.net -->

<!-- This script and many more are available free online at -->

<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin

var interval = 60; // 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("http://www.shirehouseentertainment.com/images/ad1.jpg");

image_list[image_index++] = new imageItem("http://www.shirehouseentertainment.com/images/ad2.jpg");

image_list[image_index++] = new imageItem("http://www.shirehouseentertainment.com/images/ad3.jpg");

image_list[image_index++] = new imageItem("http://www.shirehouseentertainment.com/images/ad4.jpg");

image_list[image_index++] = new imageItem("http://www.shirehouseentertainment.com/images/ad5.jpg");

image_list[image_index++] = new imageItem("http://www.shirehouseentertainment.com/images/ad6.jpg");

image_list[image_index++] = new imageItem("http://www.shirehouseentertainment.com/images/ad7.jpg");

image_list[image_index++] = new imageItem("http://www.shirehouseentertainment.com/images/ad8.jpg");

image_list[image_index++] = new imageItem("http://www.shirehouseentertainment.com/images/ad9.jpg");

image_list[image_index++] = new imageItem("http://www.shirehouseentertainment.com/images/ad10.jpg");

image_list[image_index++] = new imageItem("http://www.shirehouseentertainment.com/images/ad11.jpg");

image_list[image_index++] = new imageItem("http://www.shirehouseentertainment.com/images/ad12.jpg");

image_list[image_index++] = new imageItem("http://www.shirehouseentertainment.com/images/ad13.jpg");

image_list[image_index++] = new imageItem("http://www.shirehouseentertainment.com/images/ad14.jpg");

image_list[image_index++] = new imageItem("http://www.shirehouseentertainment.com/images/ad15.jpg");

image_list[image_index++] = new imageItem("http://www.shirehouseentertainment.com/images/ad16.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);

}

// End -->

</script>

</HEAD>

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

<div align="center">

<table border="0" width="100%" cellpadding="2" id="table1">

<tr>

<td>&nbsp;<p>&nbsp;</p>

<center>

<img name="rImage" src="http://www.shirehouseentertainment.com/images/ad5.jpg">

</center>

<p><center>

<p align="center">&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</td>

</tr>

</table>

</div>

</body>

</html>
Copy linkTweet thisAlerts:
@RiannaNov 13.2006 — Check Terrific Rotators.
×

Success!

Help @Bigadrian spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...