2

x 量のスライドをループする jQuery 循環カルーセルを作成しました。このスライダーにページネーションを追加しています。各ポイントは、各スライドに関連するリスト アイテムです。1 番目のスライドが表示されている場合、1 番目のスライドのクラスは current です。[次へ] をクリックすると、クラスが 1 番目の li から削除され、2 番目の li に追加されます。

私が抱えている問題は、すべてのリスト項目を確認したら、「現在の」クラスを最初のリスト項目に追加したいということです。前のボタンがクリックされたときに反対も発生する必要があります。

ページネーション用の私のjQueryコードは次のとおりです。

window.next = function() {
var li = jQuery("li.current");
if (li.length)
    li.removeClass("current").next().addClass("current");
else
    jQuery("li").first().addClass("current");
}
window.prev = function() {
var li = jQuery("li.current");
if (li.length)
    li.removeClass("current").prev().addClass("current");
else
    jQuery("li").last().addClass("current");
}
}

そして私のhtmlマークアップ：

<ul>
<li class="current"></li>
<li></li>
<li></li>
</ul>

これをループさせる方法を誰か教えてもらえますか? ここで私の作品を見ることができますhttp://www.samskirrow.com/projects/carousel

4

2 に答える 2

3

存在するかどうかを簡単に確認できますnext。存在しない場合は、最後にいる必要があるため、最初のものを選択してください。

if (li.length){

    var $next = li.next();

    if($next.length == 0) $next = $("li").first();

    li.removeClass("current");
    $next.addClass("current");
}

同様に、前の。

于 2013-03-29T13:28:58.540 に答える
0

これを試して：

window.next = function() {
   var li = jQuery("li.current");
   if (li.length && li.next().length)
       li.removeClass("current").next().addClass("current");
   else {
       li.removeClass("current");
       jQuery("li").first().addClass("current");
   }
}

window.prev = function() {
   var li = jQuery("li.current");
   if (li.length && li.prev().length)
       li.removeClass("current").prev().addClass("current");
   else {
       li.removeClass("current");
       jQuery("li").last().addClass("current");
   }
}
于 2013-03-29T13:28:29.927 に答える