0

スライダーを作成しましたが、最後のスライドに到達したときに動作がおかしくなり、最初のスライドからやり直す必要があります。最後のスライドに到達するまでは上にスライドしますが、最初のスライドに移動する必要がある場合は下にスライドします。そして、それは最初のものを見逃しています。つまり、それは（下向きでも）表示されますが、私のページネーションドットでは、クラス .selected を最初のものに追加しません。その後、次のサイクルまで再び正常に動作します。

なぜその2つのことが起こっているのですか。/and /;if(active_slide.index() == last_slide.index())を変更しようとしました。... 役に立ちませんでした。if(active_slide.next().length == 0)<if(active_slide.is(last_slide))

ここに jsfiddle http://jsbin.com/iwiroq/4/editがあります。

4

2 に答える 2

2

@yabolの回答に基づいて、ローリングイメージリストを使用した最小限の例を作成しました

HTML:

<div class="image-slider">
    <ul>
        <li><img src="http://lorempixel.com/400/200/sports" alt="" /></li>
        <li><img src="http://lorempixel.com/400/200/food" alt="" /></li>
        <li><img src="http://lorempixel.com/400/200/city" alt="" /></li>
        <li><img src="http://lorempixel.com/400/200/nature" alt="" /></li>
    </ul>
</div>

JS:

var image_list = $('.image-slider li');
image_list.hide();
var first_child = '.image-slider li:first-child';
var last_slide = $('.image-slider li:last-child');
var last_index = last_slide.index();
var active_slide = $(first_child);
active_slide.show();
setInterval(next, 5000);

function next(){
    active_slide.slideUp();
    if (active_slide.index() >= last_index)
        $(first_child).insertAfter(active_slide);

    active_slide = active_slide.next();
    active_slide.slideDown();
}

遊ぶためのJSFiddleまたはTinker。

于 2013-01-25T12:01:46.390 に答える
0

上ではなく下にスライドする理由は、リストの最初の要素が最後の要素よりも dom ツリーで上位にあるためです。最初の要素を最後の要素として追加することで回避できます。最後の要素がロードされ、最初にスワップされます。

于 2013-01-25T10:13:32.940 に答える