Question

我想在我的页面中创建一个图片幻灯片，我使用下面的代码，但它不起作用。

HTML code：

<div id="slider"></div>

JS代码：

var image_slide = new Array("01.jpg", "02.jpg","03.jpg","04.jpg","05.jpg");
var image_length = image_slide.length;
var image_current = 0;

function slide () {
    window.onload = function () {
        document.getElementById("slider").appendChild(image_current);
    };

    if (image_current >= image_length){
        image_current = 0;
    } else {
        document.slideshow.src = image_slide[image_current];
        image_current++;
    }
}

function auto () {
    setinterval(slide, 3000);
}

另外，在var image_slide = new Array("image/01.jpg","image/02.jpg");等数组中使用文件路径是否正确？

Answer 1

我对您的代码进行了一些更改。它完美地工作..以前你没有图像标签，也没有函数的初始化

<!DOCTYPE html>
 <html>
  <head>
   var image_slide = new Array("01.jpg", "02.jpg","03.jpg","04.jpg","05.jpg");
   var image_length = image_slide.length;
   var image_current = -1;

   function slide () {
    if (image_current == image_length){
     image_current = 0;
    } else {
     image_current++;
    }
    document.slideshow.src = image_slide[image_current];
   }

   function auto () {
    setInterval(slide, 1000);
   }


   window.onload = function(){
    slide(); // To show the 1st image
    auto(); // Initialize the slider
   }

  </script>
 </head>
 <body>
  <div id="slider">
   <img name="slideshow" />
  </div>
 </body>
</html>

我不知道window.onload的测试用例，但最好将你的javascript放在正文或使用jquery的onload来摆脱跨浏览器的问题..并且还将所有内容都包装到对象或函数中以保持其清洁并与他人保持安全

如何使用带有多个图像的div创建图像幻灯片

1 个答案: