p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/index.php)
-   Javascript How-To (http://p2p.wrox.com/forumdisplay.php?f=87)
-   -   How to recycle an image? (http://p2p.wrox.com/showthread.php?t=78416)

JohnAlex1101 March 2nd, 2010 02:55 PM

How to recycle an image?
 
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:
  1. visit www.cnn.com (this is page 1)
  2. visit www.abcnews.com (this is page 2)
  3. visit the testing page (this is page 3, and remains as page 3 while the image changes)
  4. 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.


All times are GMT -4. The time now is 11:48 AM.

Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.