Image rotation

To The Live Thread

Thread: Image rotation

Back to category: Javascript Discussions & Code

blake_jl

Hi everyone,

I was wondering if there is anyone here that has the time to help me with two scripts I need. It's probably very basic for you guys but very difficult for me.

I need to create to different types of image rotators for a website of mine.

1. The first randomly loads an image from the list on each pageload

2. The second is like a slideshow that goes through the list in order and the images fade in and out.

I have been searching the inte

rnet

for script number 1 with no success. The second script I have found at dynamic drive but cant get it to work and it changes the images randomly.

Both scripts are used at (zymol.com/shop) but I cant even figure out how to grab them from there.

Any help appreciated.

manu`

This code should randomly show an image when your page loads.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<title>Untitled Document</title>
<script type="text/

javascript

" language="

javascript

">
var imageSRC = new Array()

/* make an Array with the source to every Image you would like to use */
imgSRC[0] = "img/image0.jpg";
imgSRC[1] = "img/image1.jpg";
imgSRC[2] = "img/image2.jpg";
imgSRC[3] = "img/image3.jpg";
imgSRC[4] = "img/image4.jpg";
imgSRC[5] = "img/image5.jpg";

function showRandomImage()
{
var randomnumber = Math.floor(Math.random()*6); /* generates a random number from 0 to 5, if you want to get a number between 0 and 100 just change the 6 to 1001 */
var imgTag = document.getElementById("randomImage");
imgTag.src = imgSRC[randomnumber];
}
</script>
</head>

<body onLoad="showRandomImage()">
<img src="img/image.jpg" id="randomImage">
</body>
</html>

If your images are all named image0.jpg, image1.jpg, image2.jpg, ... you can generate the array by using a for loop like:

for (var i = 0; i < 100, i++)
{
imgSRC<> = "img/image"+i+".jpg"";
}

blake_jl

thanks a lot manu.

I will have a play around with that.

much appreciated.

DangerMouse

I'd suggest a solution like the one found at http://smoothgallery.jondesign

.net

/ for your image rotation problem, looks pretty straightforward to implement.

As for randomly selecting an image to show, I'd tend to do this server side for slight accessibility gains, however in reality I'm sure the solution provided by manu would work equally as well.

DM

blake_jl

thanks Dangermouse. I will look at your solution also.

As far as the script provided by manu. I havent been successful. This is what I have

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<title>Untitled Document</title>
<script type="text/

javascript

" language="

javascript

">
var imageSRC = new Array()

/* make an Array with the source to every Image you would like to use */
imgSRC[0] = "images/image-top1.gif";
imgSRC[1] = "images/image-top2.gif";
imgSRC[2] = "images/image-top3.gif";
imgSRC[3] = "images/image-top4.gif";
imgSRC[4] = "images/image-top5.gif";
imgSRC[5] = "images/image-top6.gif";

function showRandomImage()
{
var randomnumber = Math.floor(Math.random()*6); /* generates a random number from 0 to 5, if you want to get a number between 0 and 100 just change the 6 to 1001 */
var imgTag = document.getElementById("randomImage");
imgTag.src = imgSRC[randomnumber];
}
</script>
</head>
<body onLoad="showRandomImage()">
<img src="images/image-top.gif" id="randomImage">
</body>
</html>

The problem has to be to do with <img src="images/image-top.gif" id="randomImage"> I think I have done something wrong there.

I was not sure what to put in as the image src. I have 7 images. 1-6 are in the script in the header, and the 7th is in the tag here.

It just shows the image-top.gif image and doesnt change when refreshed.

manu`

sorry my fault, the array name differs from the variables Applause

change <>var imageSRC = new Array() to var imgSRC = new Array() and it should work

blake_jl

Rock on!

That fixed it and works perfect.

Thanks a heap!

manu`

when you use an array for your numbers it couldn`t be 0

<html>
<script type="text/

javascript

" language="

javascript

">
function RollDice()
{
var randomnumber = Math.floor(Math.random()*6);
var numbers = new Array()

numbers[0] = 1;
numbers[1] = 2;
numbers[2] = 3;
numbers[3] = 4;
numbers[4] = 5;
numbers[5] = 6;

document.forms[0].dice.value = numbers[randomnumber];
}
</script>

<form name="yourname" method="get">
<input type="button" value="Roll A Die" onclick="RollDice()" >
<input type="text" name="dice" value="" readonly>
</form>
</html>

blake_jl

Sorry manu I didnt follow.

Have I made an error? It ap

pear

s to be working fine...

Thread Categories

		Best of The Cache Home
		Search The Cache