1

サイクルする必要がある画像を含む非常に単純なリストがあります。スクリプトは次のとおりです。

var graphic = $('#banner li');
  graphic.hide();
    cycle = $(graphic).each(function(i,e) {
      while(i-- >= 0){
        $(e).show(300).delay(2000).hide(300)
      }
      if(i===0){cycle()}
    })

それはほとんど機能します..一度に1つではなくすべての画像を表示しますが、リストを通過するたびに各画像を削除します. CSSで使用できますoverflow:hidden;が、それは望ましくありません。また、0 になると繰り返されません。

助けてください。このような単純なタスクには、肥大化したサイクル プラグインも必要ありません。ありがとう！

**graphic配列にしようとしましたが、それも機能しませんでした。

フィドル

4

1 に答える 1

0

次を使用してロジックを少しリファクタリングしました.eq。

var graphic = $('#banner li').hide(), //hide and cache list items selector
    i = 0,
    l = graphic.length;
(function cycle() {
    graphic.eq(i++ % l).show(300).delay(2000).hide(300, cycle);
}());

フィドル

IIFE 自体をコールバックとして渡すことにより、現在の反復の.hide()アニメーションが完了すると、次の項目に対して表示、遅延、および非表示のループが繰り返されます。

i関数の最後で をインクリメントしgraphic.hide()、 IIFE に入る前に呼び出すことができます。

var graphic = $('#banner li'),
    i = 0,
    l = graphic.length;
graphic.hide();
(function cycle() {
    graphic.eq(i % l).show(300).delay(2000).hide(300, cycle);
    i++;
}());

上記は読みやすくするためのもので、最初のスニペットと同じ効果があります。

于 2013-03-21T12:22:30.253 に答える