1

jqueryを使用して4秒ごとにpostのクラスを持つdivにクラスを追加する最良の方法は何ですか？

<div class="34 post">
<img width="311" height="417" src="#" class="#" alt="newspapers" />
<h2><a href="#">Headline News Part 2</a></h2>
<p>testing new content</p>
</div>

<div class="9 post">
<img width="311" height="417" src="#" class="#" alt="newspapers" />
<h2><a href="#">Headline News Part 2</a></h2>
<p>testing new content</p>
</div>

<div class="6 post">
<img width="311" height="417" src="#" class="#" alt="newspapers" />
<h2><a href="#">Headline News Part 2</a></h2>
<p>testing new content</p>
</div>

したがって、最初のクラスに「display」のクラスを設定し、4秒後にそのクラスを削除して、2番目のクラスに追加します。さらに4秒後、2番目から削除し、3番目に追加します。最後に到達すると、ループバックします。

4

2 に答える 2

3 
var $postDivs = $('div.post'), // assuming these won't change
    i = -1,
    CLASS_NAME = 'foo';

setInterval(function () {
    $postDivs.eq(i).removeClass(CLASS_NAME);
    i = (i+1) % $postDivs.length;
    $postDivs.eq(i).addClass(CLASS_NAME);
}, 4000);

http://jsfiddle.net/mattball/k2sJy/

于 2012-04-10T20:33:04.513 に答える
1

ニュース アイテムのシンプルな無限ローテーションを作成したい場合は、jQuery サイクル プラグインを試してみてください。

于 2012-04-10T20:38:33.960 に答える