javascript图片幻灯片无法正常工作

Question

我制作了一个javscript代码，每2秒旋转3张图像。但是它执行不正确。我只看到第一个图像。我是javascript的初学者。请解释我做错了什么。任何人都推荐一本关于javascript的好书。

这是代码：_

    <html>
    <head>
    <title>slide</title>
    <script type="text/javascript">
    <!--
    img1=new Image();
    img1.src="arch.jpg";
    img2=new Image();
    img2.src="apartments.jpg";
    img3=new Image();   
    img3.src="streets.jpg";
    -->
    </script>
    </head>

    <body>

    <script type="text/javascript">
    function slide(i)
     {

     if(i==1)
      {
      document.getElementById("pic").src=img2.src;

      }
      if(i==2)
       {
        document.getElementById("pic").src=img3.src;

       }
      if(i==3)
       {
        document.getElementById("pic").src=img1.src;

       }    

       if(i<3)
       {
       i++;
       setTimeout("slide(i)",2000);
       }
       else
       {
       i=1;
       setTimeout("slide(1)",2000);
       }

     }

    document.getElementById('button').addEventListener("click",setTimeout("slide(1)",2000),false);
    </script>

    <img src="arch.jpg" id="pic"></img>
    <input type="button" value="Click" id="button"></input>
    </body>
    </html>

Answer 1

您使用setTimeout的方式不太正确，在delay参数之后，您可以传递回调函数将要接收的其他一些值（ “字符串” ）：

setTimeout(function(val){
  console.log(val);// "a string"
},1000,"a string");

值得尝试将变量i作为第三个参数传递给setTimeout：

if(i<3)
{
   setTimeout(slide,2000,++i);
}
else
{
   i=1;
   setTimeout(slide,2000,i);
}

希望这可以帮助。

Answer 2

这是我刚刚整理的粗略但实用的代码。 注意了我是如何使用setTimeout的，正如您所看到的，还有一些方法可以压缩幻灯片功能。

var i=0,
baseUrl = 'http://i.imgur.com/',
images = ['la7nDkI','Kdmzy1z','RtelUKm'],

slide = function(index){
    document.getElementById('pic').src = baseUrl + images[i] + '.png';  
},

loop = function(){

    setTimeout(loop, 1000);

    slide(i);

    i++;

    if(i === images.length){
        i=0;
    }

};

loop();