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

Question

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

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

注意:让 slider 加载按下左边的灰色按钮，然后让幻灯片继续...有一个空白的 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