如何在JavaScript中无限切换图像

Question

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

Answer 1

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

Answer 2

你好，你应该试试这个:

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

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