jquery - slider 不显示最后一张图像

Question

我的 slider 有问题，因为它会正确重置，显示第一张和第二张图像，但不显示第三张。

$(document).ready(function(){
    $("#1").css("opacity","1");
    var numBackgrounds =  $(".backgroundImage").length;
    var i = 1;
    var nextSlide = i+1;
    window.setInterval(function(){


        if(nextSlide>numBackgrounds){
            nextSlide= 1;
        }
        console.log(nextSlide);

        $("#"+nextSlide).animate({ opacity: 1 }, 500);


        if(i==numBackgrounds){
            i= 1;
        }
        else{
            $('#'+i).animate({ opacity: 0 }, 500);
            i++;
            nextSlide = i+1;
        }
    }, 10000);



});

我拥有的 HTML:

<div class="test">
            <img class="backgroundImage" id="1" src="../customDrop/slider/images/3.jpg">
            <img class="backgroundImage" id="2" src="../customDrop/slider/images/2.jpg">
            <img class="backgroundImage" id="3" src="../customDrop/slider/images/1.jpg">        
</div>

Answer 1

您需要该代码中的解决方案使用 var numBackgrounds = $(".backgroundImage").length+1;

否则开始 i=0