Question

我正在学习GCSE计算，需要能够改变不同图像之间的间隔。我的代码目前看起来像这样...

＆＃13;

<!DOCTYPE html>
<html>
<body>
<h1> Traffic lights can change on their own </h1>

<img src="RED.jpg" id= "traffic" width="155" height="198">
<script>

var myImage = document.getElementById("traffic");

 var imageArray = ["RED.jpg", "RED-ORANGE.jpg", "GREEN.jpg", "ORANGE.jpg"];

 var imageIndex = 0; 

 function changeImage() 
{
  myImage.setAttribute("src",imageArray[imageIndex]);
  imageIndex++;
  if (imageIndex >= imageArray.length) {
    imageIndex = 0;
 }

}

setInterval(changeImage,1000);

</script>
</body>
</html>+

＆＃13;

如果您可以包含一些此代码，同时更改理想的间隔。

Answer 1

假设您只想使用Javascript解决此问题：

Source documentation

// Save the var timeoutID = window.setTimeout(code, [delay]);
var imageTimers = [500, 1000, 2000, 4000];
var timeTochange = Math.random() * 3000; // or whatever you want to use...
var aTimer = setTimeout(changeImage, timeTochange);

// On the changeImage, alter the timeTochange var.
function changeImage() {
   // ...stuffs...
   clearTimeout(aTimer);
   timeTochange = imageTimers[imageIndex];
   aTimer = setTimeout(changeImage, timeTochange);
}

图像之间的间隔不同

1 个答案: