按钮单击循环访问图像

Button Click Iterate Through Images

本文关键字：图像 访问 循环 单击 按钮      更新时间：2023-09-26

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

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

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

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

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

其中 max 是您的图像计数。

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

相关文章：