javascript - jquery 滑块不适用于少于 3 个图像 - 即一个或两个

Question

我有以下代码当图像少于三个时我面临问题它显示空白幻灯片它不能作为旋转器完美地工作我希望它像顺时针和逆时针方向的无限旋转器一样工作。

jsfiddle

CSS

#slider-wrapper {
    margin: 5% 10%;
    max-height: 500px;
    max-width: 300px;
    position:relative;
}
#slider {
    display: block;
    position: relative;
    z-index: 99999;
    max-width: 710px;
    width: 100%;
    margin: 0 auto;
    background: red;
}
#button-previous {
    height: 60px;
    left: -40px;
    margin-top: 40%;
    position: absolute;
    width: 40px;
}
#button-next {
    float: right;
    margin-top: 40%;
    position: relative;
}
.sp {
    position: absolute;
}
#slider .sp {
    max-width: 710px;
    width: 100%;
    max-height: 500px;
    height: 40px;
}

JavaScript

$(document).ready(function(e) {

    $("#slider > div:gt(0)").hide();
$("#button-next").click(function () {
    $("#slider > div:first")
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .appendTo("#slider");
});

$("#slider > div:gt(0)").hide();
$("#button-previous").click(function () {
    $("#slider > div:last")
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .appendTo("#slider");
});
});

HTML

<div id="slider-wrapper">
        <div id="slider">
            <div class="sp"><img src="Images/thumb/1.jpg" width="234" height="240"></div>
            <div class="sp"><img src="Images/thumb/2.jpg" width="234" height="240"></div>
            <div class="sp"><img src="Images/thumb/3.jpg" width="234" height="240"></div>
        </div>
            <div id="button-previous">prev</div>
            <div id="button-next">next</div>
        </div>

Answer 1

您必须删除 next() 选择器（因为您已经在使用 append）并使用 prependTo 作为上一个按钮。

  $("#button-next").click(function () {
        $("#slider > div.sp:first")
            .fadeOut(1000)
            .fadeIn(1000)
            .appendTo("#slider");

        $("#slider > div.sp:first")
        .fadeOut(1000)
        .appendTo("#slider");
    });

    $("#slider > div:gt(0)").hide();
    $("#button-previous").click(function () {
         $("#slider > div.sp").fadeOut(1000);
        $("#slider > div.sp:last")
           .prependTo("#slider") 
            .fadeIn(1000);

    });

顺便说一下，这是工作小提琴

http://jsfiddle.net/jeremejazz/KZgaq/

Answer 2

jsFiddle 演示

当图像少于两个时

这意味着您只有一张图片？要使其与单个图像一起工作并使其成为无限循环，请使用以下代码：

var sliderDivs = $('#slider > div.sp');
var sliderCount = sliderDivs.length;
var currSlide = 0;
$("#slider > div.sp:eq(0)").fadeIn(1000);
$("#button-next").click(function () {
    $("#slider > div.sp:eq(" + currSlide + ")").fadeOut(1000);
    currSlide++;
    if (currSlide > sliderCount - 1) currSlide = 0;
    $("#slider > div.sp:eq(" + currSlide + ")").fadeIn(1000);
});
$("#button-previous").click(function () {
    $("#slider > div.sp:eq(" + currSlide + ")").fadeOut(1000);
    currSlide--;
    if (currSlide < 0) currSlide = sliderCount - 1;
    $("#slider > div.sp:eq(" + currSlide + ")").fadeIn(1000);
});

Answer 3

你也可以试试这个：

$(document).ready(function(e) {
    $("#slider > div:gt(0)").hide();
        $("#button-next").click(function () {
            $("#slider > div:first")
                .fadeOut(1000)
                .next()
                .fadeIn(1000);
            $("#slider > div:first").appendTo("#slider");
        });

    $("#button-previous").click(function () {
        $("#slider > div:first")
            .fadeOut(1000);
        $("#slider > div:last")
            .fadeIn(1000);
        $("#slider > div:first").before($("#slider > div:last"));
    });
});