信号を同期させてアニメーションをループする方法がわかりません

このコードは私が作成したものですが、トラフィックライトが緑色/インデックス= 2のときにアニメーションを実行しようとしています。私は文字通りすべてのことを試してきましたので、そこではどのボウフンもお待ちください。コードのこれら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

それは簡単です。 indexが2の場合にのみ、位置が移動するように、機能frameのチェックが必要です。

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

感謝:) –

信号を同期させてアニメーションをループする方法がわかりません

答えて

関連する問題