javascript - jquery slider 不适用于少于 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

jsFiddle Demo

when images are less than two

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

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);
});