javascript幻灯片的递归函数不起作用

Question

I don't know why the if statement doesn't work.

    <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>

I have 3 images in HTML .

The variable slideIndex goes up to 3 and stays at 3.

Answer 1

You shouldn't use classList as it isn't properly supported:

 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>