滑块不显示最后一张图片

Posted 2023-05-08

【中文标题】滑块不显示最后一张图片

【英文标题】：Slider doesn't show the last image

【发布时间】：2018-09-23 18:51:15

【问题描述】：

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

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

【问题讨论】：

尝试用 0 而不是 1 初始化 i 看看。我的意思是var i = 0;

var var i = 1; 必须是 var i = 0;

【参考方案1】：

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

否则开始 i=0

【参考方案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);
);

【参考方案3】：

如果 start i = 0 然后让你的条件像 nextSlide>=numBackgrounds)