Question

这是我的代码。它有三个部分。在第一个脚本部分我创建图像对象并放置我的Images.In第二个脚本，我试图使用setTimeout函数循环图像。但它不工作

<!DOCTYPE html>
   <head>
    <script type="text/javascript">

        var image=new Array();
            image[0]=new Image();
            image[0].src='1.jpg';
            image[1]=new Image();
            image[1].src='2.jpg';



     function slideimage(){
     var slider=0;

       document.getElementById('slide').src=image[slider].src;

       if(slider<1){
       slider++
       }
       else{
       slider=0;
       }
      var t=setTimeout(function(){slideimage()},2000);
     }

     </script>
     </head>
     <body onload="slideimage()"> 
      <img src="1.jpg" id="slide" width="100" height="100"/> 
     </body>
     </html>

Answer 1

我认为更好的方法是利用setInvterval。

<script type="text/javascript">
 var image = new Array();
 image[0] = new Image();
 image[0].src = '1.jpg';
 image[1] = new Image();
 image[1].src = '2.jpg';

 var slider = 0;
 function slideimage() {

  document.getElementById('slide').src = image[slider].src;

  if (slider < 1)       
    slider++;
  else
   slider = 0;    
 }
var x = window.setInterval(slideimage,2000);
</script>

Answer 2

您的slider变量将始终设置回0，因此每次image将调用{{}时，您都会将1.jpg来源设置为setTimout 1}}。

只需将滑块变量移动到函数体外部即可。

slideimage()

为什么此JavaScript代码不能以幻灯片形式播放？

2 个答案: