(我用的是vanilla JS)所以我希望图像每1秒切换一次。 然而,它只切换一次并停止。
HTML
<img class="pic" id="pic" src=
"images/lightsOff.png">
JavaScript
function imageChange() {
document.getElementById("pic").src =
"images/lightsOn.png";
}
setInterval(imageChange, 1000)
你好,你应该试试这个:
let toggle = false;
function imageChange() {
document.getElementById("pic").src = toggle ? "images/lightsOn.png" : "images/lightsOff.png";
toggle=!toggle;
}
setInterval(imageChange, 1000)
您的问题是,您将图像设置为lightsoff
每秒,但我们实际上需要每秒在lightsoff
和lightson
之间切换图像。
代码只是一遍又一遍地设置相同的src。 您需要检查src是什么并对其进行调整。 我只需要使用一个data属性,然后用interval在这两个属性之间切换。 不需要跟踪布尔值或检查图像是什么。
null
var img = document.querySelector("#flip");
window.setInterval(function () {
var newSrc = img.dataset.src;
img.dataset.src = img.src;
img.src = newSrc;
}, 2000);
<img data-src="http://placekitten.com/g/200/200" src="http://placekitten.com/200/200" id="flip"/>