1

私はjCarouselLiteを使用して3つの要素間を循環しています。プラグインをセットアップして、これをうまく実行します。これには、.bulletX各要素にスライドする3x、つまり、箇条書き1が要素1にスライドするなどが含まれます。

ただし、nivosliderと同様に、クラスを循環させて、表示されている要素を指定する必要があります.active.bulletX

<div class="bullet1">If this is clicked, is leads to element1</div>
<div class="bullet2">If this is clicked, is leads to element2</div>
<div class="bullet3">If this is clicked, is leads to element3</div>

.addClassとでできることがあるように感じ.removeClassますが、頭の中でループのセマンティクスを完全に理解することはできません。

.active.bullet2手動で適用

ここに画像の説明を入力してください

完全なHTMLを編集する

<div class="twwetHolder">
    <div class="tweet">
     <ul>
        <li>
            <div>element 1</div>
        </li>
        <li>
            <div>element 2</div>
        </li>
        <li>
            <div>element 3</div>
        </li>
     </ul>

    </div>  
<div class="bullet1"></div>
<div class="bullet2"></div>
<div class="bullet3"></div>
</div>
4

2 に答える 2

2

アップデート:

各箇条書き (別の箇条書き) にクラスを追加し、btnGo イベントとクリック イベントを使用してクラスを追加することをお勧めします。

http://jsfiddle.net/lucuma/fg6d4/1/

<div class="bullet1 btngo">a</div>
<div class="bullet2 btngo">b</div>
<div class="bullet3 btngo">c</div>

$('.tweet').jCarouselLite({btnGo:$('.btngo')});

    $('.btngo').click(function() {
       $('.btngo').removeClass('active'); 
       $(this).addClass('active');

    });
​

オリジナル:

次のオプションを試すことができます。

 beforeStart: function(a) {
      $(a).removeClass('active');
    },
   afterEnd: function(a) {
        $(a).addClass('active');
    }
于 2012-05-29T14:23:05.310 に答える
0

.toggleClass()あなたを助けるかもしれません - http://api.jquery.com/toggleClass/

于 2012-05-29T14:53:09.040 に答える