我不知道如何让我的动画与红绿灯同步答案

【问题标题】：I don't know how to loop my animation in sync with traffic lights我不知道如何让我的动画与红绿灯同步
【发布时间】：2016-12-08 12:57:59
【问题描述】：

我在下面制作了这段代码，我正在尝试在红绿灯亮/index=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() {
	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>

【问题讨论】：

标签： javascript html animation traffic light

【解决方案1】：

这很简单。您只需要检查函数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>

【讨论】：