Question

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

Answer 1

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

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

其中max是你的图像数量。

但我认为jQuery中可以有更简单，更好的解决方案：）

Answer 2

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

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

按钮单击“迭代图像”

2 个答案: