javascript - 如何在点击时将图像更改为其他图像？

Question

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

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

谢谢!

Answer 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];
}