Question

我已经制作了一个javscript代码，每2秒旋转3张图片。但它没有正确执行。我只能看到第一张图片。我是javascript的初学者。请解释一下我和＃39;我做错了。也有人可以推荐一本关于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不太正确，在延迟参数之后你可以传递回调函数将要接收的一些其他值（＆＃34;一个字符串＆＃34; ）：

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();

javascript图片幻灯片无效

2 个答案: