简体   繁体   中英

I don't know how to loop my animation in sync with traffic lights

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

It's simple. You just need a check in the function frame so that it moves the position only if the index is 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> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM