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>

であり、ここで

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; 
     }) 
    } 
}

slide.jsです。それは配列全体をループします。ボタンをクリックするだけで、どのようにループをループさせることができますか？

container.innerHTML = ''を追加しようとしました。次の画像を追加するときに前の画像が削除されますが、結果的にスライダ画像[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で簡単なスライドショーを作成するには？

答えて

関連する問題