Wie zu beheben, einfache Slider Bug - Javascript

Question

Ich versuche, einen einfachen Schieberegler mit Javascipt zu erstellen. das Problem ist, wenn der Zähler wird Element dauern, es dosen't die Anzeige ändern Dies ist der Code

<div id="slider"> 
<img class="slide" src="img/img13.jpg" alt=""/> 
<img class="slide" src="img/img14.jpg" alt=""/> 
<img class="slide" src="img/img15.jpg" alt=""/> 
<img class="slide" src="img/img16.jpg" alt=""/> 
<img class="slide" src="img/img17.jpg" alt=""/> 
<img class="slide" src="img/img18.jpg" alt=""/> 
</div> 

var delay = 3000; 
var i = 0; 
var allSliderSlides = document.getElementsByClassName('slide'); 
allSliderSlides[0].style.display = "block"; 
setInterval(function(){ 
    i++; 
    allSliderSlides[i].style.display = "block"; 

    if(allSliderSlides[i-1].style.display=="block"){ 
     allSliderSlides[i-1].style.display="none"; 
    } 

    if(i == allSliderSlides.length-1){ 

     i = 0; 
     allSliderSlides[allSliderSlides.length-1].style.display = "none"; 
     allSliderSlides[i].style.display = "block"; 


    } 

},delay); 

bitte geben Sie mir einen Rat oder Vorschlag zur Behebung dieses Problems dank

Answer 1

Sie zu blockieren neu zugewiesen i = 0 vor dem letzten Element zu werden Block

Versuchen:

if(i == allSliderSlides.length-1){ 

    allSliderSlides[allSliderSlides.length-1].style.display = "none"; 
    allSliderSlides[i].style.display = "block"; 
    i = 0; 
} 

Answer 2

Hier ist das Problem:

if(i == allSliderSlides.length-1){ 

     i = 0; 
     allSliderSlides[allSliderSlides.length-1].style.display = "none"; 
     allSliderSlides[i].style.display = "block"; 


    } 

Sie setzen den Zähler zurück, bevor Sie den Stil ändern. Dies führt dazu, dass das erste Bild angezeigt wird und das letzte Bild niemals angezeigt wird.

Lösung: Verschieben Sie i = 0; zum letzten Zeile im Block wie folgt:

if(i == allSliderSlides.length-1){ 


       allSliderSlides[allSliderSlides.length-1].style.display = "none"; 
       allSliderSlides[i].style.display = "block"; 
       i = 0; 


      } 

Hoffnung, das hilft.