为什么我的图片库不能正常工作？

Question

I'm pretty new with javascript and I've (almost) made an image gallery. It includes two buttons (pictures not actuall HTML buttons). Anyway, the button that selects the next picture is working fine, though, the one that is supposed to back to the previous picture is working but once you've passed the first picture it jumps to a white (you know when it's just white and a little picture symbol in the middle). I have no idea why.

Javascript:

<script>
        var myImage= new Array(); 
        myImage[0]="pics/IMG1.jpg";       
        myImage[1]="pics/IMG2.jpg";
        myImage[2]="pics/IMG3.jpg";
        myImage[3]="pics/IMG4.jpg"; 

    var ImageCnt = 0; 

    function next(){
        ImageCnt++;

        if(ImageCnt == 4) { 
            ImageCnt = 0; 

        }
        document.getElementById("img1").src = myImage[ImageCnt];
    }

    function previous () {
        ImageCnt--; 

        if(ImageCnt == 0) {
            ImageCnt = 4;

        }
        document.getElementById("img1").src = myImage[ImageCnt];            
    }
</script>

HTML (only img parts):

            <div class="img_box">
            <img id="img1" src="pics/img1.jpg" onmousedown="return false;"></img>
            </div>

        <div class="img_switch">
            <a href="#" onclick="previous();return false;"><img class="img_switch_pic" src="pics/previous.png" width="100px"/></a>
            <a href="#" onclick="next();return false;"><img class="img_switch_pic" src="pics/next.png" width="100px"/></a>
        </div>

Thanks in advance! :)

Answer 1

Your next/previous logic is flawed:

    if(ImageCnt == 0) {
        ImageCnt = 4;
    }

You've only defined myImage 0->3, so when you reset the ImageCnt to 4, you're looking up an image that doesn't exist. As well, you've hard-coded the expected length of the images array, meaning that if you add more images later, you'll have to modify both functions to accept that new length.

Try

prev:

ImageCnt--;
if (ImageCnt < 0) {
   ImageCnt = myImage.length -1;
}

next:

ImageCnt++;
if (ImageCnt >= myImage.length) {
   imageCnt = 0;
}

This makes the checks dynamic, and you don't have to do anything except update your myImage array with more/fewer images.

Answer 2

For your previous code, try decreasing the values like this instead:

if(ImageCnt == -1) {
ImageCnt = 3;
}

The problem is that your array only goes to 3 (0-3 instead of 1-4) so it is reaching for an image that is not there.

Answer 3

function previous () { ImageCnt--;

    if(ImageCnt == -1) {
        ImageCnt = 3;

    }
    document.getElementById("img1").src = myImage[ImageCnt];            
}

You just go 0 to 3. Just change ImageCnt = 4 to 3 More over, if you are at index 0, you have to display your image0

So you want to be on imagecnt == -1 to display your 4th image (index = 3)

Answer 4

in your previous method you have an error. Should be that way:

   if(ImageCnt == -1) {
        ImageCnt = 3;

    }

Because the 4 index does not exist in the Array and 0 position neither!

Hope it helps!

Cheers!