How to recycle an image?

JohnAlex1101 · March 2nd, 2010, 02:55 PM

In their fine book, Beginning JavaScript v4, in Chapter 10, the authors show how to go through three images. How do I close this and recycle to the beginning?

Code:

<script language=JavaScript type="text/javascript">
var currentImgNumber = 1;
var numberOfImages = 3;

function window_onload()
{
	setTimeout("switchImage()",3000);
	
}
function switchImage()
{
	currentImgNumber++;
	document.imgAdvert.src = 'AdvertImage' + currentImgNumber + '.jpg';
	if(currentImgNumber<numberOfImages)
	{
		setTimeout("switchImage()",3000);   }
		history.go(-2)
		
}
</script>

</head>

<body onload="window_onload()">
<img src="AdvertImage1.jpg" name="imgAdvert" />


</body>
</html>

Old Pedant · March 3rd, 2010, 04:09 PM

Code:

function switchImage()
{
     currentImgNumber++;
     if ( currentImgNumber > numberOfImages ) currentImgNumber = 1;
     document.imgAdvert.src = 'AdvertImage' + currentImgNumber + '.jpg';
     setTimeout("switchImage()",3000);   }
     history.go(-2)
 }

Not sure what the history.go(-2) is for, but the rest is simple enough.

EDIT: I 100% agree w/ PeterPeiGuo. Get rid of that history.go line!

PeterPeiGuo · March 4th, 2010, 12:15 AM

I guess that history.go(-2) was an attempt to go back to image 1 when it is on image 3 (1 - 3 = -2).

However that won't work , as the page never went forwardly or backwardly. Although the image changed, it was always the "same page".

use the following code, and follow the test sequence specified below, you will see what history.go(-2) actually does.

Code:

function switchImage()
{
	if(currentImgNumber < numberOfImages)
	{
		document.imgAdvert.src = ++ currentImgNumber + '.jpeg';
	} else if (currentImgNumber == numberOfImages) {
		history.go(-2);
	} 
	setTimeout("switchImage()",3000);   
}

Steps for testing:

visit www.cnn.com (this is page 1)
visit www.abcnews.com (this is page 2)
visit the testing page (this is page 3, and remains as page 3 while the image changes)
Wait until you see the last page, wait for 3 more seconds, you will be led back to www.cnn.com

PeterPeiGuo · March 4th, 2010, 12:54 AM

As for the solution that Old Pedant provided, that line with history.go(-2) should be removed. The code won't work unless special condition is met.

If there is no page -2 to go (for example you view the testing page using a brand new tab), your code will work as history.go(-2) takes no effect in this case. Otherwise you will be led away from the testing page upon the first execution of the script.

PeterPeiGuo · March 5th, 2010, 12:01 AM

JQuery Cycle plugin is an interesting alternative for this. It gives you many built-in visual effects.