0

私は次のコードを持っています。画像が3つ未満の場合に問題に直面しています。空白のスライドが表示され、回転子として完全に機能していません。時計回りと反時計回りの両方の方法で無限回転子のように動作させたいです。

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>
4

3 に答える 3

1

jsFiddle デモ

画像が 2 枚未満の場合

つまり、画像は 1 つしかありません。単一の画像で動作させ、無限ループにするには、次のコードを使用します。

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);
});
于 2013-08-13T06:11:19.057 に答える