javascript - 为什么我的图片库无法使用？

Question

我对 javascript 还很陌生，而且我(几乎)已经制作了一个图片库。它包括两个按钮(图片不是实际的 HTML 按钮)。无论如何，选择下一张图片的按钮工作正常，不过，应该返回上一张图片的按钮正在工作，但是一旦你通过了第一张图片，它就会跳到白色(你知道什么时候它只是白色并且中间有一个小图片符号)。我不知道为什么。

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(仅img部分):

            <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>

提前致谢! :)

Answer 1

您的下一个/上一个逻辑有缺陷:

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

您只定义了 myImage 0->3，因此当您将 ImageCnt 重置为 4 时，您将查找不存在的图像。此外，您还对图像数组的预期长度进行了硬编码，这意味着如果稍后添加更多图像，则必须修改这两个函数以接受新的长度。

尝试

上一个:

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

下一个:

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

这使得检查动态化，除了用更多/更少的图像更新 myImage 数组之外，您无需执行任何操作。