如何在JS中製作簡單的幻燈片？

我正在嘗試使用JavaScript製作簡單的幻燈片。如何在JS中製作簡單的幻燈片？

這裏是我的index.html

<body> 
    <h1>Slideshow example</h1> 
    <button onclick="slideshow.timer()">Next slide</button> 
    <div id="container"></div> 
<script src="slide.js"></script> 
</body>

這裏是slide.js

var slideshow = { 
    sliderImages: ["img/img1.png", "img/img2.png"], 
    timer: function() { 
     this.sliderImages.forEach(function(img) { 
      var container = document.getElementById('container'); 
      var image = document.createElement('img'); 
      container.appendChild(image); 
      image.src= img; 
     }) 
    } 
}

如果我點擊「下一張幻燈片」按鈕，我看到兩個圖像。它遍歷整個數組。點擊按鈕時，我怎麼才能讓它在數組中循環一次？

我試着添加container.innerHTML ='';以便在添加下一個圖像時刪除先前的圖像，但這會導致它在immigietly中顯示sliderImages中的圖像[1]。我接近這件事是錯誤的嗎？

來源

2016-09-19 userden

我更新了你的代碼。這不是寫它的最好方法，但我只是修改你的例子來向你展示問題。問題是你的計時器功能正在通過數組中的所有元素。相反，你可能想要做的是增加一些延遲。

var slideshow = { 
 
    sliderImages: ["img/img1.png", "img/img2.png"], 
 
    currentImgIndex: 0, 
 
    timer: function() { 
 
     if (this.currentImgIndex < this.sliderImages.length) { 
 
     var image = document.getElementById('img'); 
 
     image.src= this.sliderImages[this.currentImgIndex]; 
 
     this.currentImgIndex++; 
 
     setTimeout(function(){ slideshow.timer()}, 2000) 
 
     } else { 
 
     alert("no more images"); 
 
     } 
 
    } 
 
}

<body> 
 
    <h1>Slideshow example</h1> 
 
    <img id="img"/> 
 
    <button onclick="slideshow.timer()">Next slide</button> 
 
    <div id="container"></div> 
 
    <script src="slide.js"> </script> 
 
</body>

來源

2016-09-19 05:33:41 nandu

如果你要改變圖像按鈕被點擊時，纔不需要foreach循環。如果你打算在沒有用戶交互的情況下改變圖像，那麼你需要循環，但你也需要setInterval。

來源

2016-09-19 05:48:13

如何在JS中製作簡單的幻燈片？

回答

相關問題