提问者:小点点

如何在JavaScript中无限切换图像


(我用的是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)

共2个答案

匿名用户

你好,你应该试试这个:

let toggle = false;
function imageChange() {
  document.getElementById("pic").src = toggle ? "images/lightsOn.png" : "images/lightsOff.png";
  toggle=!toggle;
}
setInterval(imageChange, 1000)

您的问题是,您将图像设置为lightsoff每秒,但我们实际上需要每秒在lightsofflightson之间切换图像。

匿名用户

代码只是一遍又一遍地设置相同的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"/>