我不知道如何循環我的動畫與交通燈同步

我有以下代碼我已經做了，我試圖運行動畫時，交通燈是綠色/指數= 2。我已經從字面上嘗試了我所能做的一切，所以請讓任何boffins向我展示如何將這兩部分代碼同步循環。我不知道如何循環我的動畫與交通燈同步

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

感謝那些真正的工作:) –

我不知道如何循環我的動畫與交通燈同步

回答

相關問題