Я не знаю, как зацикливать анимацию в синхронизации с светофорами

У меня есть этот код ниже, который я сделал, и я пытаюсь запустить анимацию, когда светофор на зеленый/индекс = 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() { 
 
\t setInterval(function(){ index = index + 1; 
 

 
    if (index == 4) index = 0; 
 

 
    var image = document.getElementById('light'); 
 
    image.src=list[index]; }, 3000); 
 

 
    
 
})() 
 

 
</script> 
 
<script> 
 
    (function myMove() { \t 
 
    var elem = document.getElementById("animate"); 
 
    var pos = 0; 
 
var id = setInterval(frame,10); 
 
    function frame() { 
 
    if (pos == 300) { 
 
\t \t pos = 0; 
 
    } else { 
 
     pos++; 
 
     elem.style.top = pos + 'px'; 
 
     elem.style.left = pos + 'px'; 
 
    } 
 
    } 
 
})() 
 
\t \t \t \t \t \t 
 
</script> 
 
</body> 
 
</html>

источник

2016-12-08 Braden Moosey

Это просто. Вам просто нужно проверить функцию 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>

источник

2016-12-08 13:45:32

Спасибо, что действительно работал :) –

Я не знаю, как зацикливать анимацию в синхронизации с светофорами

ответ

Смежные вопросы