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

Answer 2

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

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

<强> jsFiddle example

如何通过点击将图像更改为其他图像？

2 个答案: