如何在点击时将图像更改为其他图像？答案

【问题标题】：How to make an image change into others on click?如何在点击时将图像更改为其他图像？
【发布时间】：2014-12-06 00:07:32
【问题描述】：

我正在尝试制作一种可点击的最小“幻灯片”。到目前为止，我只设法将图像更改为另一个。但我想向其中添加其他图像。我试图在 javascript 上添加其他 if 和 else，但它不起作用。（我是菜鸟...）我该怎么做？我只是想点击，图像会改变。到目前为止，这是我的代码：

<div> <img alt="" src="1.jpg" id="imgClickAndChange" onclick="changeImage()"/> </div>



<script language="javascript">
function changeImage() {

    if (document.getElementById("imgClickAndChange").src = "1.jpg") 
    {
        document.getElementById("imgClickAndChange").src = "2.jpg";

        document.getElementById("imgClickAndChange").src = "3.jpg";
    }

 }
</script>

谢谢！

【问题讨论】：

比较值时，您必须使用 == 或 ===（在您的 if 语句中）。另外，在代码块中，您将源两次设置为不同的值？

标签： javascript html image onclick slideshow

【解决方案1】：

在您的情况下，您需要一个双等号 == - 您也可以传入 this 以避免多次使用 getElementById。如果你想制作一个循环器 - 你可以将你的源放入一个数组并循环：

<img alt="" src="1.jpg" id="imgClickAndChange" onclick="changeImage(this)"/>

var images = ["1.jpg", "2.jpg", "3.jpg"];
function changeImage(img) {
    var currentIndex = images.indexOf(img.src);
    var zeroBasedLength = images.length - 1;

    if (currentIndex == zeroBasedLength)
        img.src = images[0];
    else
        img.src = images[++currentIndex];
}

【讨论】：

我认为 OP 想要循环浏览图像。在一个 if 语句中更改两次是没有意义的。
进行了编辑 - 设置了一系列可能的图像选择，您可以循环浏览该阵列。
它不起作用 :( 现在当我点击它什么都不做......也许我误解了一些东西。这就是我所拥有的：

【解决方案2】：

如果您想循环浏览这些图像，我会创建一个数组并交换其中元素的位置，如下所示：

var imgs = ["2.jpg", "3.jpg", "1.jpg"];
function changeImage() {
    document.getElementById("imgClickAndChange").src = imgs[0];
    imgs.push(imgs.shift())
}

jsFiddle example

【讨论】：