0

jQuery を使用してカスタム コンテンツ スライダーを作成しています。実際の例については、こちらのフィドルを参照してください。この例では、2 つのスライドしかありません。緑のボタンをクリックすると、次のスライドに移動します。

これにさらにスライドを追加し、ボタンをクリックしてそれぞれにスライドさせたい（前のボタンはありません）。現在の jQuery 関数には、idハードコーディングされた次の div があります。スライドを追加すると、この方法は効果的ではなくなります。現在の div を検出し、次にクリックすると次の div に移動するという 1 つの関数の書き方がわかりません。どうすればこれを達成できますか？

ありがとうございました。

以下にコードを掲載しました。

HTML

<div id="main-slider-space">
    <div class="slider-wrapper">

        <div id="slide1" class="main-slide">

        </div><!-- end of slide1 -->   

        <div id="slide2" class="main-slide">

        </div><!-- end of slide2 -->   

    </div> <!-- end of slider-wrapper -->   
</div><!-- end of main-slider-space -->

<div id="main-slider-next" class="slider-buttons"><a class="active" href="#"></a></div>

CSS

#main-slider-space {
    overflow:hidden;
    width:600px;
    height:300px;
    background-color:#C36;
    margin-left:50px;
}

.slider-wrapper {
    position:relative;
    left:0;
    width:3000px;
    height:100%;
}

.main-slide {
    width:600px;
    height:100%;
    float:left;
}

#slide1 { background-color:#5FF; }
#slide2 { background-color:#F5F; }

.slider-buttons {
    position:absolute;
    width:30px;
    height:30px;
}

.slider-buttons:hover { cursor:pointer; }

#main-slider-next {
    background-color:#99CC66;
    right:30px;
    top:50%;
}

jQuery

function goto(id, t){
    $(".slider-wrapper").animate({"left": -($(id).position().left)}, 600);
}

$(document).ready(function(e) {
   $('#main-slider-next').click(function(e) {
        e.preventDefault();
        goto('#slide2', this);
        return false;
    }); 
});

フィドル

4

1 に答える 1

1

私はアニメーションにcssを使用します。これが私があなたのものに変更したものです:

.main-slide {
    position:absolute;
    width:600px;
    height:100%;

    -webkit-transition:left 0.5s linear;
    -moz-transition:left 0.5s linear;
    -o-transition:left 0.5s linear;
    transition:left 0.5s linear;
}

.main-slide:not(.current){
    left:600px;
}

.main-slide.current{
    left:0px;
}

次に、クリック ハンドラーで現在の要素のクラスを変更するだけです。

$(document).ready(function(e) {
   $('#main-slider-next').click(function(e) {
        e.preventDefault();
        next();
        return false;
    }); 
});

function next(){
    var cur = $(".slider-wrapper").children(".current");
    var next = cur.next(".main-slide");
    if(next.length) {
        cur.removeClass("current");
        next.addClass("current");
    }
}

これは私がやったことのフィドルですhttp://jsfiddle.net/NeekGerd/rhXZT/1/

前のスライドを表示したままにしたい場合は、次の行を削除してください:

cur.removeClass("current");
于 2013-02-10T18:54:07.440 に答える