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

我试图做一个最小的可点击“幻灯片”。到目前为止，我只能设法将图像更改为另一个。但我想添加其他图像。我试图在JavaScript上添加其他ifs和elses，但它不起作用。（我是一个noob ...）我该怎么做？我急于点击并且图像改变。这是我的代码到目前为止：如何在点击时将图像更改为其他图像？

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

谢谢！

来源

2014-10-10 Owly

当比较必须使用==或===值（在你的if语句）。另外，在代码块中，您将源设置为不同的值两次？ – orhanhenrik 2014-10-10 18:37:25

如果通过这些图像需要周期，我会做一个数组和交换元件的位置它喜欢：

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

jsFiddle example

来源

2014-10-10 18:44:00 j08691

+1 [尼斯和清洁（http://jsfiddle.net/qydx6b2m/1/）。 – showdev 2014-10-10 18:57:58

它工作！谢谢：） – Owly 2014-10-10 19:03:17

在您的情况下，您需要双等于== - 您也可以通过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]; 
}

来源

2014-10-10 18:38:15 tymeJV

我认为OP想循环浏览图像。如果在一个if语句中改变它两次，那么没有这样的意义。 – j08691 2014-10-10 18:38:48

是的，他要求'else'语句 – Kaiido 2014-10-10 18:40:27

做了一个编辑 - 建立一个可能的图像选择阵列，你可以在数组中循环。 – tymeJV 2014-10-10 18:43:53

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

回答

相关问题