javascript - 单击时更改图像(6 个图像循环)

Question

我有 6 张图像，我想通过单击图像来在它们之间交换，但我似乎无法正确获取代码以使其转到下一张图片

HTML

    <img src="BCover.jpg" id="ImgGallery" onclick="ImgGallery()"/>

JavaScript

var counter = 1;

ImgGallery.onclick = function (){
if (counter == 1){
    document.getElementById("ImgGallery").src = "BCover.jpg";
    counter++;
}
else if (counter == 2){
    document.getElementById("ImgGallery").src = "MechGP.jpg";
    counter++;
}
else if (counter == 3){
    document.getElementById("ImgGallery").src = "Mech2.jpg";
    counter++;
}
else if (counter == 4){
    document.getElementById("ImgGallery").src = "Mech3.jpg";
    counter++;
}
else if (counter == 5){
    document.getElementById("ImgGallery").src = "Mech4.jpg";
    counter++;
}
else if (counter == 6){
    document.getElementById("ImgGallery").src = "MCA1.png";
    counter==1;
}
};

Answer 1

问题(除了斯宾塞关于 == 赋值的评论之外)似乎是 ImgGallery 应该是函数的名称，而不是对元素的引用，因为它被作为函数调用img 元素的 onclick 属性。

我将 ImgGallery() 函数重命名为 rotateGallery，以消除元素 id 的歧义。

我还通过使用数组循环而不是 switch 语句来稍微清理您的代码来处理 img 库旋转。

<img src="BCover.jpg" id="ImgGallery" onclick="rotateGallery()"/>


var counter = 0,
    gallery = ["BCover.jpg", "MechGP.jpg", "Mech2.jpg", "Mech3.jpg", "Mech4.jpg", "MCA1.png"],
    rotateGallery = function () {
        document.getElementById("ImgGallery").src = gallery[counter];
        counter++;
        if (counter >= gallery.length) {
            counter = 0;
        }
    };