我不知道如何與交通信號燈同步播放動畫

Question

我在下面制作了此代碼，並且當交通信號燈在green / index = 2上時嘗試運行動畫。 我已經盡力嘗試了所有可以做到的事情，所以請所有棺材向我展示如何循環同步這兩部分代碼。

 <!DOCTYPE html> <html> <body> <h1>The best GCSE traffic lights sequence any examiner has ever seen!</h1> <img id="light" src="Traff 1.jpg"> <style> #container { width: 600px; height: 475px; position: absolute; background: #000; } #animate { width: 300px; height: 170px; position: absolute; background: url(car.jpg); } </style> <div id ="container"> <div id ="animate"></div> </div> <script> var list = [ "Traff 1.jpg", "traff 2.jpg", "traff 3.jpg", "traff 4.jpg" ]; var index = 0; (function nextlight() { setInterval(function(){ index = index + 1; if (index == 4) index = 0; var image = document.getElementById('light'); image.src=list[index]; }, 3000); })() </script> <script> (function myMove() { var elem = document.getElementById("animate"); var pos = 0; var id = setInterval(frame,10); function frame() { if (pos == 300) { pos = 0; } else { pos++; elem.style.top = pos + 'px'; elem.style.left = pos + 'px'; } } })() </script> </body> </html>

Answer 1

這很簡單。 您只需要在功能frame進行檢查，以便僅在index為2的情況下才移動位置。

function frame() {
    if (index !== 2) {
        return;
    }
    ...
}

工作示例（使用顏色代替圖像）：

 <!DOCTYPE html> <html> <body> <h1>The best GCSE traffic lights sequence any examiner has ever seen!</h1> <!-- <img id="light" src="Traff 1.jpg"> --> <div id="light">Traff Light</div> <style> #container { margin: 30px 0; width: 900px; height: 500px; position: absolute; background: #000; } #animate { width: 300px; height: 170px; position: absolute; background: blue; /* background: url(car.jpg); */ } #light { background: red; border: 5px solid cyan; height: 50px; width: 100px; } </style> <div id="container"> <div id="animate"></div> </div> <script> var list = [ "Traff 1.jpg", "traff 2.jpg", "traff 3.jpg", "traff 4.jpg" ]; var tlight = ['red', 'yellow', 'green', 'grey']; var index = 0; (function nextlight() { setInterval(function() { index = index + 1; if (index == 4) index = 0; var image = document.getElementById('light'); //image.src = list[index]; image.style.background = tlight[index]; }, 3000); })(); </script> <script> (function myMove() { var elem = document.getElementById("animate"); var pos = 0; var id = setInterval(frame, 10); function frame() { if (index !== 2) { return; } if (pos == 300) { pos = 0; } else { pos++; elem.style.top = pos + 'px'; elem.style.left = pos + 'px'; } } })(); </script> </body> </html>

我不知道如何與交通信號燈同步播放動畫

問題描述

1 個解決方案

解決方案1
0 已采納 2016-12-08 13:45:32

我不知道如何與交通信號燈同步播放動畫

問題描述

1 個解決方案

解決方案1 0 已采納 2016-12-08 13:45:32

解決方案1
0 已采納 2016-12-08 13:45:32