タイマー付きHTMLでイメージをループする

-1

これは私のコードです。元の赤いイメージしか出力されず、コードをループさせる方法を理解できません。私はこのコードが必死に必要なので、誰かを助けることができますか？タイマー付きHTMLでイメージをループする

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

出典

2016-10-12 nuke040

使ったsetIntervalは - これは、単純にすべてのXミリ秒を引き起こしてしまいますコードのブロックであるなど、forループなどのループではありません。

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);

これは、changeLightsを4秒ごとに呼び出します。また、GCSEの質問には特に注意が必要です。

出典

2016-10-12 09:04:50

ありがとうございます – nuke040

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

出典

2016-10-12 09:08:02

タイマー付きHTMLでイメージをループする

答えて

関連する問題