1

私は 9 つのスライドを含むカルーセルを持っています。最初のスライドには「アクティブ」のクラスがあります。

<ul class='nav'>
    <li class='left'>left</li>
    <li class='right'>right</li>
</ul>

<ul class='carousel'>
    <li class='active'></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

「右」ボタンがクリックされると、アクティブなクラスは次の li に移動する必要があります (最後の li の後の最初の li にも適用される必要があります)。

そして明らかに、左ボタンがクリックされたとき、アクティブなクラスは反対方向に移動する必要があります。

私は次のことを試しましたが、これはある程度機能しますが、アクティブなクラスを最後のliの後に最初のliに戻す方法がわかりません。

$('.nav .right').click(function(){
    $('.carousel .active').removeClass('active').next().addClass('active');
});

どんな助けでも大歓迎です。ありがとう。

4

3 に答える 3

1

確かに改善される可能性がありますが、次のコードは必要なことに対応しています。

$('.nav .right').click(function(){
    var next = $('.carousel .active').removeClass('active').next();
    if (next.length == 0) { next = $('.carousel li').first(); }
    next.addClass('active');
});
于 2013-07-16T09:07:32.217 に答える
0

試す

var $carousel = $('.carousel');
$('.nav .right').click(function(){
    var next = $carousel.children('.active').removeClass('active').next();
    if(!next.length){
        next = $carousel.children().first();
    }
    next.addClass('active');
});

$('.nav .left').click(function(){
    var prev = $carousel.children('.active').removeClass('active').prev();
    if(!prev.length){
        prev = $carousel.children().last();
    }
    prev.addClass('active');
});

デモ:フィドル

別のバリエーション:フィドル

于 2013-07-16T09:08:29.433 に答える
0 
$('.nav .right').click(function () {
    $('.carousel .active:not(:last-child)').removeClass('active').next().addClass('active');
});
$('.nav .left').click(function () {
    $('.carousel .active:not(:first-child)').removeClass('active').prev().addClass('active');
});

フィドル

于 2013-07-16T09:05:36.570 に答える