Question

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

<!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>

Answer 1

使用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问题，尤其是课程作业。

Answer 2

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

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

使用计时器在HTML中循环显示图像

2 个答案: