Question

我正在尝试做一个在没有用户输入的情况下自动运行的红绿灯序列。我现在已经有了代码工作，但它只运行一次，然后停止，所以我怎么能改变它，所以它继续下去？这是我的代码：

<!DOCTYPE html>
<html>
<head>
<script>
var images = new Array()
images[0] = "image2.jpg";
images[1] = "image3.jpg";
images[2] = "image4.jpg";
setInterval("changeImage()", 3000);
var x=0;

function changeImage()
{
document.getElementById("img").src=images[x]
x++;
}
</script>
</head>
<body>
<img id="img" src="image1.jpg">
</body>
</html>

Answer 1

要自动执行此操作，您可以将其置于循环中，也可以使用setInterval function。

var interval = setInterval(nextLightClick, 1500);

这将无限循环，每1500毫秒（1.5秒）运行一次该函数。如果你想停止它，你可以简单地说：

clearInterval(interval);

这是一个例子 - 请注意我正在更改innerHTML而不是src，我使用的是div而不是图像，但逻辑将完全相同。

var tlight = new Array("1green.jpg","2yellow.jpg","3red.jpg");
var index = 0;
var tlightLen = tlight.length;
var image = document.getElementById('firstlight');
image.innerHTML = tlight[index];
var interval;
function startInterval() {
  interval = setInterval(nextLightClick, 1500);
}
function stopInterval() {
  clearInterval(interval);
}
function nextLightClick() {
    index++;
    if (index == tlightLen) 
        index = 0;
    image.innerHTML = tlight[index];
}

  <span id="firstlight"></span></br>
  <button onclick="startInterval()">Start</button>
  <button onclick="stopInterval()">Stop</button>

手动交通灯通过Javascript自动转换为自动

1 个答案: