JavaScript幻灯片卡在第一张照片上

JavaScript slideshow stuck on first photo

本文关键字：第一张照片 幻灯片 JavaScript      更新时间：2023-09-26

我是一个Javascript初学者，试图使用Javascript制作一个简单的幻灯片。从我所做的工作中，我只能制作五张图像中的一张。控制台说没有问题，我不知道为什么其他图片不会显示。

<script>
    var images = new Array();
        images[0] = new Image();
        images[0].src = "burger1.jpg";
        images[1] = new Image();
        images[1].src = "burger2.jpg";
        images[2] = new Image();
        images[2].src = "burger3.jpg";
        images[3] = new Image();
        images[3].src = "burger4.jpg";
        images[4] = new Image();
        images[4].src = "burger5.jpg";

    var slide = 0;
    function next(){
        if (!document.images) {
          return document.getElementById('slideshow').src = images[slide].src
        }       
        if(slide < 5){
          slide++;
        } else{
            slide = 0;
          }
      setTimeout("next()",3000);
    }
    next();
</script>
</head>
<body>
<img src="burger1.jpg" id="slideshow" width=100 height=100 />

附言我不知道jquery。

if (!document.images) {
      return document.getElementById('slideshow').src = images[slide].src
    }

这里 ！document.images 是[object HTMLCollection]的，您只检查此用途!：

if(slide < 5){
          slide++;
        } else{
            slide = 0;
          }
      setTimeout(next,3000);
document.getElementById('slideshow').src = images[slide].src

删除

   if (!document.images) {
      return document.getElementById('slideshow').src = images[slide].src
    }

加

document.getElementById('slideshow').src = images[slide].src

setTimeout后

您的代码中还有更多需要修复的问题，因此我将尝试向您展示一种更好的方法，然后只是快速：

jsBin 演示 

var slideshow = document.getElementById('slideshow'), // Cache your element!
    images = [                            // Create an array of images paths
       "burger1.jpg", 
       "burger2.jpg",
       "burger3.jpg"
    ],
    slide = 0,
    tot = images.length;    // count the total of images
for(var i=0; i<tot; i++){   // preload images (so we don't have to wait for them)
  var img = new Image();
  img.src = images[i];
}

function next() {
  slideshow.src = images[slide++ % tot]; // Modulo operator to loop the counter
  setTimeout(next, 3000);                // Don't wrap `next` in String
}
next();
相关文章：