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-＆gt; 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

function previous（）{ ImageCnt--;

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

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

你只需要0到3.只需将ImageCnt = 4更改为3即可此外，如果你在索引0，你必须显示你的image0

所以你想在imagecnt == -1上显示你的第四张图像（索引= 3）

Answer 4

在您之前的方法中出现错误。应该那样：

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

    }

因为数组中不存在4索引而且0位置也不存在！

希望它有所帮助！

干杯！

为什么我的图库没有效果？

4 个答案: