Question

我的滑块有问题，因为它正确地重置它显示的是第1张和第2张图像而不是第3张。

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

Answer 2

你可以简单地完成你的功能并试试这个：

$(document).ready(function(){
    var numBackgrounds =  $(".backgroundImage").length;
    $("#1").css("opacity","1");
    var i = 1;
    window.setInterval(function(){
        var next = i + 1;
        if (next > numBackgrounds) { next = 1; }
        $("#"+i).animate({ opacity: 0 }, 500);
        $("#"+next).animate({ opacity: 1 }, 500);
        i++;
        if (i > numBackgrounds) { i = 1; }
    }, 1000);
});

Answer 3

如果开始i = 0那么你的条件就像 nextSlide＆GT = numBackgrounds）

滑块不显示最后一张图像

3 个答案: