rotating images with javascript prob

howdy · Oct 24, 2003

Hi all,
I'm trying to rotate 5 images which load from the server. My script loads
the images but when i move to the end of my array i want to cycle throught
the array again so that the images will load again in succession. At the
moment the images load through once and then stop on the first one. How can
i make my code constantly cycle throuhg the images and not stop once it has
gone through one time?
Here is my current code:

<SCRIPT language="JavaScript">

var pic_width=300;
var pic_height=300;

if (document.images)
{
pic1= new Image(pic_width,pic_height);
pic1.src="http://www.ripnet.com/SilverHarbor/steveTEST/pics/pic1.jpg";
pic2= new Image(pic_width,pic_height);
pic2.src="http://www.ripnet.com/SilverHarbor/steveTEST/pics/pic2.jpg";
pic3= new Image(pic_width,pic_height);
pic3.src="http://www.ripnet.com/SilverHarbor/steveTEST/pics/pic3.jpg";
pic4= new Image(pic_width,pic_height);
pic4.src="http://www.ripnet.com/SilverHarbor/steveTEST/pics/pic4.jpg";
pic5= new Image(pic_width,pic_height);
pic5.src="http://www.ripnet.com/SilverHarbor/steveTEST/pics/pic5.jpg";
}

var pics= new Array(5)
pics[0]=pic1.src;
pics[1]=pic2.src;
pics[2]=pic3.src;
pics[3]=pic4.src;
pics[4]=pic5.src;

var numpics=5;
var thenum=0;
imgName="img1";

function change_it()
{
if (document.images)
{
document.write("<IMG SRC='"+pics[thenum]+"' border='0'
width='"+pic_width+"' height='"+pic_height+"' name='img1'>\n");
setTimeout('change_it2()',1000);
}
}

function change_it2()
{
var x=0;
thenum+=1;

if (thenum>numpics-1)
{
document[imgName].src=pics[0];
}
else
{
document[imgName].src=pics[thenum];
x+=-1;
setTimeout('change_it2()',1000);
}
}

//-->
</SCRIPT>

<body>
<SCRIPT language="JavaScript">

</SCRIPT>
</body>

kudos
steve

Lasse Reichstein Nielsen · Oct 24, 2003

howdy said:
I'm trying to rotate 5 images which load from the server. My script loads
the images but when i move to the end of my array i want to cycle throught
the array again so that the images will load again in succession. At the
moment the images load through once and then stop on the first one.

function change_it2()
{
var x=0;
thenum+=1;

if (thenum>numpics-1)
{
document[imgName].src=pics[0];

Insert here:
thenum = 0;

}

/L

howdy · Oct 24, 2003

I tried that and it is the same as before. After it has gone through all the
pics, it stops at the first pic andd oesn't rotate through again.
regards
steve

Lasse Reichstein Nielsen said:
howdy said:

I'm trying to rotate 5 images which load from the server. My script loads
the images but when i move to the end of my array i want to cycle throught
the array again so that the images will load again in succession. At the
moment the images load through once and then stop on the first one.

function change_it2()
{
var x=0;
thenum+=1;

if (thenum>numpics-1)
{
document[imgName].src=pics[0];

Click to expand...

Insert here:
thenum = 0;

}

Click to expand...

/L

Lasse Reichstein Nielsen · Oct 24, 2003

howdy said:
I tried that and it is the same as before. After it has gone through all the
pics, it stops at the first pic andd oesn't rotate through again.

My bad. That's what happens when you post half of the solution.

Try this function:
---
function change_it2()
{
thenum++;
if (thenum >= numpics)
{
thenum = 0;
}
document[imgName].src=pics[thenum];
setTimeout(change_it2,1000);
}
---
You never used "x" for anything in change_it2?

If you know you are gounf to recall change_it2 every second, you might
want to use setInterval once instead of setTimeout repeatedly.

/L

Dr John Stockton · Oct 25, 2003

JRS: In article <[email protected]>, seen in

function change_it2()
{
thenum++;
if (thenum >= numpics)
{
thenum = 0;
}
document[imgName].src=pics[thenum];
setTimeout(change_it2,1000);
}

OK; or

thenum++ ; thenum %= numpics
doc ...
set ...

IMHO, it is always best to avoid if statements, provided that the
alternative is readily understandable after it has been written.

doc ... [thenum++] ; thenum %= numpics
set ...

or

doc ... [thenum = (thenum+1)%numpics]
set ...

howdy · Oct 25, 2003

Yes that worked. Many thanks.
Steve

Lasse Reichstein Nielsen said:
howdy said:

I tried that and it is the same as before. After it has gone through all the
pics, it stops at the first pic andd oesn't rotate through again.

Click to expand...

My bad. That's what happens when you post half of the solution.

Try this function:
---
function change_it2()
{
thenum++;
if (thenum >= numpics)
{
thenum = 0;
}
document[imgName].src=pics[thenum];
setTimeout(change_it2,1000);
}
---
You never used "x" for anything in change_it2?

If you know you are gounf to recall change_it2 every second, you might
want to use setInterval once instead of setTimeout repeatedly.

/L

Create a Random Number to offset linked images	2	Nov 23, 2005
Preload images still reloading from server?	2	Dec 30, 2003
JQuery - Preloading Images	0	Apr 18, 2019
random image and browser test	0	Oct 29, 2003
Image preload problem	0	Sep 8, 2006
Java rotating image script	14	Oct 24, 2005
preloading images...	0	Feb 24, 2004
preloading images not working?	28	Sep 14, 2005

rotating images with javascript prob

howdy

Lasse Reichstein Nielsen

howdy

Lasse Reichstein Nielsen

Dr John Stockton

howdy

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads