jquery - 滑块不显示最后一张图像

我对滑块有问题，因为它正确重置后会显示第一张和第二张图像，但没有显示第三张。

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

最佳答案

您需要在该代码中使用var numBackgrounds = $（“。backgroundImage”）。length + 1;的解决方案。

否则开始我= 0