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

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数组外，您无需执行任何其他操作。

Answer 2

对于您之前的代码，请尝试减少如下所示的值：

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

问题在于您的数组仅变为3（0-3而不是1-4），因此它到达的图像不存在。

Answer 3

函数previous（）{ImageCnt--;

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

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

您只需要从0到3进行操作即可。只需将ImageCnt = 4更改为3即可，如果您位于索引0，则必须显示image0

因此，您想在imagecnt == -1上显示第4张图像（索引= 3）

Answer 4

在以前的方法中，您有一个错误。 应该是这样的：

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

    }

因为数组4和索引0中都不存在索引！

希望能帮助到你！

干杯!