HTML [JAVASCRIPT] 中的图像在几秒钟后更改答案

【问题标题】：Images in HTML [JAVASCRIPT] to change after a number of secondsHTML [JAVASCRIPT] 中的图像在几秒钟后更改
【发布时间】：2017-02-25 19:03:07
【问题描述】：

我的这段代码在一定程度上有效；它会改变，但变化很快，我希望它在 3 秒左右后改变，但我不知道如何改变。提前致谢！

代码：

<img id = "theImage" src="red.jpg" alt="HTML5 Icon" style="width:250px;height:500px;" align = left>

<script>
var sequence = ["red.jpg", "red&amber.jpg", "green.jpg", "amber.jpg"];
var place = 0;

setInterval(change_light,1);
function change_light() {
  place += 1;
  if (place > sequence.length -1) {
    place = 0;
  }
  document.getElementById('theImage').src = sequence[place];
}

【问题讨论】：

如果您确定有问题，请标记正确答案

标签： javascript html function timer assets

【解决方案1】：

您应该在 setInterval 期间使用毫秒。请试试这个。我还简化了你的条件：

var sequence = ["red.jpg", "red&amber.jpg", "green.jpg", "amber.jpg"];
var place = 0;
var frameInterval = 1000; // milliseconds

setInterval(change_light, frameInterval);
function change_light() {
  place++;
  place = place % sequence.length;
  document.getElementById('theImage').src = sequence[place];
}

【讨论】：

非常感谢！一直在寻求改进:)
请问“place = place % sequence.length”的函数可以定义为什么？我假设它会和以前一样，只是没有if？出于某种原因，这让我有点困惑..你能定义它的用途吗？我希望能够彻底理解它:)
当然！它是一个余数运算符，它返回一个操作数除以第二个操作数时剩下的余数。有关它的更多信息，您可以在这里找到：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

【解决方案2】：

setInterval 期望您传递毫秒数（不是秒数）

像这样使用它：setInterval(change_light,3000);

【讨论】：

【解决方案3】：

这很简单，你做的一切都是对的！只是一个微小的变化： setInterval(change_light,3000); 函数应该以毫秒而不是秒为单位接收它的时间。

而且我还想建议为 setInterval 添加一些返回值，然后如果需要使用，您将能够清除此计时器：

clearInterval(change_light_id);

这是你的固定代码：

<img id = "theImage" src="red.jpg" alt="HTML5 Icon" style="width:250px;height:500px;" align = left>

<script>
var sequence = ["red.jpg", "red&amber.jpg", "green.jpg", "amber.jpg"];
var place = 0;

change_light_id = setInterval(change_light,3000);

function change_light() {
  console.log(1);
  place += 1;
  if (place > sequence.length -1) {
    place = 0;
  }
  document.getElementById('theImage').src = sequence[place];
}
</script>

【讨论】：

非常感谢！