Question

我正在从头开始研究一个滑块（试图抓住它）但我已经遇到了问题。在我的滑块中，所有幻灯片在转到下一张幻灯片之前需要3秒钟，但是一旦到达最后一张幻灯片，就没有时间查看它。

我想添加从最后一张幻灯片到第一张幻灯片的平滑过渡。

function startSlider() {
    interval = setInterval(function() {
        $sliderContainer.animate({'margin-left': '-=+100%'}, animationSpeed, function() {
            if (++currentSlide === $slides.length+1) {
                currentSlide = 1;
                $sliderContainer.css('margin-left', 0);
            }
        });
    }, pause);
}

我猜测我的问题就在这个代码附近

暂时我在最后使用空白幻灯片...但我不想这样离开：P

提前致谢

编辑：

我通过在ul结束时重复第一张幻灯片找到了一个有效的解决方案，看起来有点hackish所以如果有人有想法，我愿意尝试替代方案。无论如何......万一有人发现它有用：http://jsfiddle.net/eclipticald/2gLh5ks0/

Answer 1

如果效果解决了您的问题，请查看此小提琴 - http://jsfiddle.net/4wnrwkf0/5/

FROM：

if (++currentSlide === $slides.length+1) {
   currentSlide = 1;
   $sliderContainer.css('margin-left', 0);
}

TO：

if (++currentSlide === $slides.length+1) {
   $sliderContainer.animate({'margin-left': '0'}, animationSpeed, function() {
       currentSlide = 1; 
   });
}

EDIT。另一个更新的小提琴，所以最后一张幻灯片不会显示白色/空白幻灯片，而是转到幻灯片＃1。 http://jsfiddle.net/4wnrwkf0/6/

干杯。

在重置循环之前在滑块暂停中创建最后一个图像（滑块从头开始）

1 个答案: