Question

我指的是Change image in HTML page every few seconds的接受答案。在此代码中，第一个定时器事件/图像更改在加载后6秒发生（然后按预期每3秒发生一次）。任何人都可以向像我这样的初学者解释为什么会这样吗？感谢。

编辑：对不起，我的错。让我试着解释一下我想做的事情。给出的代码首先显示startpicture.jpg然后循环通过image1.jpg到image3.jpg。我只是想让它循环通过image1.jpg到image3.jpg没有单独的开始图片（或所有4张图片，包括startpicture.jpg）。因此用image1.jpg替换了startpicture.jpg，这让我得到了错误的印象，即第一次图像改变发生在6秒后。

也许有人可以帮助我如何更改此代码以在没有指定开始图片的情况下循环播放图片。

Answer 1

可能是加载图像所需的时间，您可以先加载所有图像，然后开始更改，

var images= new Array();
for(var i=0;i<imagelocation.length;i++)  
{
images[i]=new Image();
images[i].onload=function(){ if(i=imagelocation.length){changeImage();}}
images[i].src=imagelocation[i]; //image location is array containg link
}
function changeImage()
{ 
 //what u had written earlier
}

Answer 2

根据你的编辑，你可以简单地删除startpicture（或替换为image1），并最初立即调用displayNextImage函数，然后开始间隔：

<!DOCTYPE html>

<html>
   <head>
      <title>change picture</title>
      <script type = "text/javascript">
          function displayNextImage() {
              x = (x === images.length - 1) ? 0 : x + 1;
              document.getElementById("img").src = images[x];
          }

          function displayPreviousImage() {
              x = (x <= 0) ? images.length - 1 : x - 1;
              document.getElementById("img").src = images[x];
          }

          function startTimer() {
              //call immediately
              displayNextImage();
              //then start interval
              setInterval(displayNextImage, 3000);
          }

          var images = [], x = -1;
          images[0] = "image1.jpg";
          images[1] = "image2.jpg";
          images[2] = "image3.jpg";
      </script>
   </head>

   <body onload = "startTimer()">
       <img id="img" src="image1.jpg">
       <button onclick="displayPreviousImage()">Previous</button>
       <button onclick="displayNextImage()">Next</button>
   </body>
</html>

javascript setInterval / onload

2 个答案: