通過Javascript將手動交通燈轉換爲自動化

我正在嘗試做一個交通燈序列，該序列在沒有用戶輸入的情況下自動運行。我現在得到的代碼工作，但它只運行一次，然後停止，所以我怎麼能改變這個，所以它繼續前進？這裏是我的代碼：通過Javascript將手動交通燈轉換爲自動化

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

來源

2017-01-26 tom kenny

爲了使這個自動的，你可以把它放在一個循環，或者您可以使用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>

來源

2017-01-26 21:50:33 mhodges

@tomkenny檢查演示在我編輯的答案，看看它在行動 – mhodges

通過Javascript將手動交通燈轉換爲自動化

回答

相關問題