我不知道如何与交通信号灯同步播放动画

Question

I have this code below I have made and I am attempting to run the animation when the traffic light is on green/index=2. 我在下面制作了此代码，并且当交通信号灯在green / index = 2上时尝试运行动画。 i have literally tried everything i can so please any boffins out there show me how to loop these two parts of the code in sync. 我已经尽力尝试了所有可以做到的事情，所以请所有棺材向我展示如何循环同步这两部分代码。

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

It's simple. 这很简单。 You just need a check in the function frame so that it moves the position only if the index is 2 . 您只需要在功能frame进行检查，以便仅在index为2的情况下才移动位置。

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

Working example (used colors instead of images): 工作示例（使用颜色代替图像）：

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