为什么这个JavaScript代码不是't用作幻灯片

Why this JavaScript Code isn't working as slideshow?

本文关键字：幻灯片 JavaScript 代码 为什么      更新时间：2023-09-26

这是我的代码。它有三部分。在第一个脚本部分中，我创建了图像对象并放置了图像。在第二个脚本中，我尝试使用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>

我认为更好的方法是利用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>

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

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

var slider = 0;
function slideimage() {
  document.getElementById('slide').src = image[slider].src;
  if (slider < 1) {
  ...
相关文章：