javascript - jQuery - 最后一张幻灯片的间隔未执行 - 动画故障

Question

我正在创建一个 slider ，但使用一堆 div 而不是图像。我总共有 3 个 div，前两个可以很好地移动，但最后一个很快就飞走了 - 它显示了一会儿，然后移回到第一个 div。我只是希望它显示与前两个相同的时间。这是我的 html 代码:

<div id="ibToShow">
    <div id='sliderWrapper'>
        <div class="infoBox" id="infob1">
            blablabla
        </div>

        <div class="infoBox" id="infob2">
            blablabla
        </div>

        <div class="infoBox" id="infob3">               
            blablabla
        </div>
    </div>
</div>

这是我的 jQuery 代码:

$(function () {
var width = '55vw';
var showTime = 2000;
var animationSpeed = 500;
var currentDiv = 1;

var $slider = $('#ibToShow');
var $sliderWrapper = $slider.find('#sliderWrapper');
var $infoBox = $sliderWrapper.find('.infoBox');

var interval;

function startSlider() {
    interval = setInterval(function () {
        $sliderWrapper.animate({'margin-left': '-=' + width}, animationSpeed, function(){
                currentDiv++;
            if (currentDiv === $infoBox.length){
                currentDiv = 1;
                $sliderWrapper.css('margin-left', 0);
            }
        })
    }, showTime);
}

function stopSlider() {
    clearInterval(interval);
}

$sliderWrapper.on('mouseenter', stopSlider).on('mouseleave', startSlider);

startSlider();
});

我感觉这可能是因为动画在第三个 div 出现后立即停止了。但不是应该等待showTime中设置的内容吗？

这个问题还没有解决。有接受者吗？

Answer 1

您在上一个动画结束后立即将左边距更改为 0。我认为这样会更好:

function startSlider() {
    interval = setInterval(function () {
        if(currentDiv++ <== $infoBox.length) {
            $sliderWrapper.animate({'margin-left': '-=' + width}, animationSpeed);
        }
        else {
            $sliderWrapper.animate({'margin-left': '0'}, animationSpeed);
            currentDiv = 0;
        }
    }, showTime);
}