javascript - html图像幻灯片不改变图像

Question

我自己编写了一个图像幻灯片，但存在一个问题，即幻灯片在每个组的第一个图像上保持静态。 这里的代码是我拥有所有图像的地方，然后从中选择它们。

< script type = "text/javascript" >
  <!-->
  var image1 = new Image()
image1.src = "LMH2015_SGVillingen_P1220967.jpg"
var image2 = new Image()
image2.src = "LMH2015_SGVillingen_P1220971.jpg"
var image3 = new Image()
image3.src = "LMH2015_SGVillingen_P1220973.jpg"
var image4 = new Image()
image4.src = "LMH2015_SGVillingen_P1220977.jpg"
var image5 = new Image()
image5.src = "LMH2015_SGVillingen_P1220985.jpg"
  //-->
  < /script>

第二部分是 JavaScript 创建幻灯片的地方。

<img src="LMH2015_SGVillingen_P1220967.jpg" width="300" height="300" name="slide" />
<script type="text/javascript">
    var step=1
    function slideit()
    {
        document.images.slide.src = eval("image"+step+".src")
        if(step<3)
            step++
        else
            step=1
        setTimeout("slideit()",3000)
    }
    slideit()
</script>

<img src="LMH2015_SGVillingen_P1220977.jpg" width="300" height="300" name="slide" />
<script type="text/javascript">
    var step=4
    function slideit()
    {
        document.images.slide.src = eval("image"+step+".src")
        if(step<5)
            step++
        else
            step=4
        setTimeout("slideit()",3000)
    }
    slideit()
</script>

我希望有一个简单的方法来解决这个问题，并且我使用图像的方式仍然可以保留，以使其更容易一点，那就是查看代码:D 标记

Answer 1

尝试下面的函数，它是动态的，只需使用数组图像和持续时间调用该函数即可。

HTML

<img src="" width="300" height="300" name="slide" />

JS

 var imageArr = ["http://stylonica.com/wp-content/uploads/2014/02/Beauty-of-nature-random-4884759-1280-800.jpg", "http://stylonica.com/wp-content/uploads/2014/02/Free-Wallpaper-Nature-Scenes.jpg", "http://www.viralnovelty.net/wp-content/uploads/2014/07/121.jpg"];
 function slideShow(imageName, imgArray, duration) {//pass image array and time duration
    if(imgArray.constructor !== Array) {
      alert("proovide valid image array for slide show");
      return false;
     }
     var step=0;
     setInterval(function(){
       if(step > imgArray.length - 1){
          step = 0; //reset count when the last image 
       }
       document.images[imageName].src = imgArray[step];
       step++;
      }, duration);
  }
 slideshow('slide', imageArr, 5000);//call the function with image name

演示链接:Slideshow