单击上一个按钮后如何停止出现空白 div？

Question

所以我用上一个和下一个按钮编写了一个非常简单的幻灯片。

但是，如果您按上一个按钮，滑块会起作用，但随后会滑到空白处 div...

注意：让滑块加载按左边的灰色按钮，然后让幻灯片继续...有一个空白 div

我该如何解决这个问题，是什么导致了这个问题？

JS fiddle: https://jsfiddle.net/z93tyrtx/

 $("#slider > div:gt(0)").hide();

    // fade out current slide (first), fade in next slide and move first slide to end
    var nextSlide = function () {
        $("#slider > div:first")
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo("#slider");
    }

    var nextSlideTimer = setInterval(nextSlide, 5000);

    // fade out current slide (first) and move last slide to top and fade in
    $("#prev-button").click(function () {
        clearInterval(nextSlideTimer);

        $("#slider > div:first")
        .fadeOut(1000);
        $("#slider > div:last")
        .fadeIn(1000)
        .prependTo("#slider");

        nextSlideTimer = setInterval(nextSlide, 5000)
        setTimeout(nextSlideTimer, 5000)
    });

    $("#next-button").click(function () {
        clearInterval(nextSlideTimer);

        $("#slider > div:first")
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo("#slider");

        nextSlideTimer = setInterval(nextSlide, 5000)
        setTimeout(nextSlideTimer, 5000)
    });

Answer 1

我认为你的问题是 .prependTo 在点击上一个按钮时实际上是在 a 标签之前插入最后一个 div，但应该在它之后插入。

只需更换

.prependTo("#slider");

到

.insertAfter("#slider > a#next-button");

勾选这个fiddle

Answer 2

您的问题是因为滑块内的按钮应该在外面，或者更改您在上一个按钮中的顺序 "prependTo"。当您命令 "prependTo" 时，div 越过按钮并打破位置。把Slider外面的按钮弄出来就ok了

Answer 3

你的问题是前面的代码按钮 div 被插入到按钮之前，所以当执行并到达 nextButton 或 nextSlide 函数时最后一个 div，这会找到一个按钮而不是 div 元素，因此它显示空白 div.

在这部分代码中，我认为没有必要设置 setTimeout，因为您已经使用了 setInterval 以及为什么 nextSlideTimer 值是数字而不是函数。

 nextSlideTimer = setInterval(nextSlide, 5000)
 setTimeout(nextSlideTimer, 5000)

您可以在这些链接中找到很好的解释和示例：

whosebug.com/settimeout-or-setinterval

javascript.info/tutorial/settimeout-setinterval

单击上一个按钮后如何停止出现空白 div？

How to stop my blank div appearing after click of previous button?

html

javascript

css

jquery

slider