如何在点击时将图像更改为其他图像?
问题描述:
我试图做一个最小的可点击“幻灯片”。到目前为止,我只能设法将图像更改为另一个。但我想添加其他图像。我试图在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>
谢谢!
答
如果通过这些图像需要周期,我会做一个数组和交换元件的位置它喜欢:
var imgs = ["2.jpg", "3.jpg", "1.jpg"];
function changeImage() {
document.getElementById("imgClickAndChange").src = imgs[0];
imgs.push(imgs.shift())
}
答
在您的情况下,您需要双等于==
- 您也可以通过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];
}
当比较必须使用==或===值(在你的if语句)。另外,在代码块中,您将源设置为不同的值两次? – orhanhenrik 2014-10-10 18:37:25