javascript - 按钮单击迭代图像

Question

我是 Javascript 新手，我试图弄清楚如何在图像之间移动。我的目标是更改 html 中图像占位符的代码，以便在每次单击按钮时，它都会更改为下一个图像。我已经想出了如何将一个图像更改为另一个图像（getElementById("mainImage").src="image2.jpg";) 但我现在需要能够在单击下一个按钮时进入“image3”。我假设我需要使用变量，但我不知道如何让它工作......

Answer 1

这可能是最简单的前进方式，尽管它最终将这些变量声明为全局变量。

var images = ["image1.jpg", "image2.jpg", "image3.jpg"];
var currentImage = 0; //defaults to image1.jpg

function goNext() {
    currentImage += 1;

    //loop back to the first image
    if(currentImage >= images.length) {
        currentImage = 0;
    }

    document.getElementById("mainImage").src = images[currentImage];
}

因此，您只需调用 goNext() 即可单击按钮。

基本上，这里发生的事情是数组是项目列表，在这种情况下，字符串是对某处图像的引用。您可以通过索引从数组中取出一个项目，这就像说给我第一个项目。在 Javascript 中，这将是图像 [0]。

Answer 2

您可以在脚本之前添加一些var key = 0;，然后在脚本中为点击事件提供操作

var image = "image" + key + ".jpg";
getElementById("mainImage").src= image;
if(key == max){
 key = 0;
}else{
 key++;
}

其中 max 是您的图像计数。

但我认为 jQuery 可以有更简单更好的解决方案 :)