设置间隔Js

Question

我想使用 setinterval 函数用 js 制作幻灯片，但我不知道为什么我的代码不起作用。虽然控制台中没有错误。我有一些图片以 bk 开头，然后是数字，我通过函数中的 if 语句调用那里的图片，但幻灯片仍然无法工作停止在 bk1 这是我的代码，如果你可以帮助我解释 setinterval 如何工作

<script>

    function slides(sf)
    {
        sf=sf+1;
       document.getElementById("centerd").style.backgroundImage = "url(pics/bk"+sf+".png)"; 
       
      if(sf>2)
      {
        sf=1;
      }
    }
    setInterval(slides(0),3000);
    
    
</script>

我也尝试过for循环

<script>
    
    
    
    function slides()
    {
      for(var i=0;i<3;i++)
      {
        document.getElementById("centerd").style.backgroundImage = "url(pics/bk"+i+".png)";
        if(i==2)
        { 
           i=1;
        }

      }
      
    }
    
    setInterval(slides,3000);
    
</script>

但也不起作用

Answer 1

在你的第一个

setInterval(slides(0),3000);

这相当于调用

setInterval(null,3000);

当幻灯片被评估并且不返回任何内容时

在 #2 中，循环将在用户界面有机会更新之前运行。 UI 仅在您离开该功能后才能更新，因为 UI 使用相同的线程。您可能希望将计数器值保留在函数中（通过

this.x

或在

window

下设置一个 var / 字段来跟踪您在动画中的位置。

function slides()
{
  for(var i=0;i<3;i++)
  {
    document.getElementById("centerd").style.backgroundImage = "url(pics/bk"+i+".png)";
    if(i==2)
    { 
       i=1;
    }

  }
  
}