用计时器循环HTML中的图像

Loop through images in HTML with a timer

本文关键字：图像 HTML 计时器 循环      更新时间：2023-09-26

这是我的代码，它只输出原始的红色图像，我不明白我应该如何使代码能够循环。有人可以帮助我需要这个代码拼命?

<!DOCTYPE html>
<html>
<head>
<h1> The traffic script</h1>
<script>

var list = [
    "H:/GCSE COMPUTING/a452/traffic thingy/traffic/bleh/red.jpg",
    "H:/GCSE COMPUTING/a452/traffic thingy/traffic/bleh/amber.jpg",
    "H:/GCSE COMPUTING/a452/traffic thingy/traffic/bleh/green.jpg"
];
var index = 0;
function changeLights() {
    index = index + 1;
    if (index == list.length) index = 0;
    var image = document.getElementById('red');
    image.src=list[index];
}
window.onload = changelights;
</script>
</head>
<body>
<img id="red" src="H:/GCSE COMPUTING/a452/traffic     thingy/traffic/bleh/red.jpg">
</body>
</html>

使用SetInterval -这不是像for循环这样的循环。它只是一个代码块，每x毫秒触发一次。

var list = [
    "H:/GCSE COMPUTING/a452/traffic thingy/traffic/bleh/red.jpg",
    "H:/GCSE COMPUTING/a452/traffic thingy/traffic/bleh/amber.jpg",
    "H:/GCSE COMPUTING/a452/traffic thingy/traffic/bleh/green.jpg"
];

   var index = 0;
function changeLights() {
    index = index + 1;
    if (index == list.length) index = 0;
    var image = document.getElementById('red');
    image.src=list[index];
}
setInterval(function(){changeLights()}, 4000);

这将每4秒调用一次changeLights。另外，在这里问GCSE的问题要小心，尤其是课程作业。

JavaScript有一个内置的interval方法，在这种情况下可以作为循环使用。

var backgroundInterval = setInterval(function() {
    changeLights();
    if(index == (list.length - 1)) {
        clearInterval(backgroundInterval); // stop the loop when it hits last image
    }
}, 4000); // every 4000 ms, or 4s
相关文章：