JavaScript rekursive Funktion funktioniert nicht

Question

Ich weiß nicht, warum die if-Anweisung nicht funktioniert.

<script> 
    var slideIndex = 0; 
function slideShow(){ 
    var images= document.getElementsByClassName('slider-box')[0].getElementsByTagName('img'); 

    images[slideIndex].classList.remove('show-slide'); 
    if(slideIndex > images.length-1) 
     slideIndex = 0; 

    slideIndex++; 
    images[slideIndex].classList.add('show-slide'); 

    setInterval(slideShow,2000); 
} 
     slideShow(); 
</script> 

Ich habe 3 Bilder in HTML.

Die Variable slideIndex geht bis zu 3 und bleibt bei 3

Answer 1

Sie sollten nicht classList verwenden, da es nicht richtig unterstützt wird:

var slider = document.getElementById("slider"); 
 
var sliderIndex = 0; 
 

 
function slide() { 
 
    for (var i = 0; i < slider.children.length; i++) { 
 
    var cls = slider.children[i].getAttribute("class").replace(/.show/ig, ''); 
 
    slider.children[i].setAttribute("class", cls); 
 
    } 
 

 
    slider.children[sliderIndex].setAttribute(
 
    "class", 
 
    slider.children[sliderIndex].getAttribute("class") + " show" 
 
); 
 

 
    sliderIndex++; 
 
    if (sliderIndex > slider.children.length - 1) { 
 
    sliderIndex = 0; 
 
    } 
 
} 
 
slide(); 
 
setInterval(slide, 3000);

#slider {} #slider .slide { 
 
    position: absolute; 
 
    -moz-transition: all 1s linear 0s; 
 
    -o-transition: all 1s linear 0s; 
 
    -webkit-transition: all 1s linear 0s; 
 
    transition: all 1s linear 0s; 
 
    opacity: 0 !important; 
 
    filter: alpha(opacity=0) !important; 
 
} 
 
#slider .slide.show { 
 
    opacity: 1 !important; 
 
    filter: alpha(opacity=100) !important; 
 
}

<div id="slider"> 
 
    <img class="slide" src="http://placehold.it/310x150/E8117F/000000?text=1" /> 
 
    <img class="slide" src="http://placehold.it/310x150/7812E5/000000?text=2" /> 
 
    <img class="slide" src="http://placehold.it/310x150/128AE5/000000?text=3" /> 
 
    <img class="slide" src="http://placehold.it/310x150/12E594/000000?text=4" /> 
 
    <img class="slide" src="http://placehold.it/310x150/E5B412/000000?text=5" /> 
 
</div>

Answer 2

try this:

<script> 
var slideIndex = 0; 
function slideShow(){ 
    var images= document.getElementsByClassName('slider-box')[0].getElementsByTagName('img'); 

    images[slideIndex].classList.remove('show-slide'); 

    slideIndex++; 
    if(slideIndex > images.length) slideIndex = 0; 
    images[slideIndex].classList.add('show-slide'); 

    setInterval(slideShow,2000); 
} 
slideShow(); 
</script>