文章をループする方法

Question

私はdiv文章をたくさん含んでいます。私は<ul>リストにこれらのステートメントをまとめましたが、これは変更される可能性があります。どのようにしてこれらのステートメントを回転するように（それぞれ4秒ごとに）表示することができますか？また、現在のステートメントを保持する一時停止ボタンがあるのを見ていますが、まず基本的なことをしたいと思います。

<div id="statements"> 
    <ul> 
    <li>Statement 1</li> 
    <li>Statement 2</li> 
    <li>Statement 3</li> 
    </ul> 
</div> 

Answer 1

例：http://jsfiddle.net/YSPe7/

var statements = $('#statements > ul > li').slice(1).hide().end(); 

var i = 0; 
function rotate() { 
    setTimeout(function() { 
     statements.eq(i).fadeOut(800, function() { 
      i = ++i % statements.length; 
      statements.eq(i).fadeIn(800, rotate); 
     }); 
    }, 4000); 
} 
rotate(); 

は基本的に、私たちはその後、セット全体を参照し、最初の文以外のすべてを隠しています。

次に、rotate()関数を呼び出します。関数内にはsetTimeout()があり、4秒の遅延が発生します。

タイムアウトのコードが実行されると、文の現在の値がiのfadeOut()^(docs)メソッドが実行されます。

​​には、iをインクリメントする（または0に戻す）コールバックがあり、その新しい要素に対してfadeIn()^(docs)メソッドが実行されます。

.fadeIn()には、同じプロセスであるrotate()関数であるコールバックがあります。

---

あなたはこのようなrotate()への引数として渡し、iで名前空間を汚染したくない場合は、次の

例：http://jsfiddle.net/YSPe7/1/

var statements = $('#statements > ul > li').slice(1).hide().end(); 

function rotate(i) { 
    setTimeout(function() { 
     statements.eq(i).fadeOut(800, function() { 
      i = ++i % statements.length; 
      statements.eq(i).fadeIn(800, function() { 
       rotate(i); 
      }); 
     }); 
    }, 4000); 
} 
rotate(0); 

---

編集：を使用してコードを少し減らすことができます代わりにsetTimeoutのメソッドを使用します。

例：http://jsfiddle.net/YSPe7/2/

var statements = $('#statements > ul > li').slice(1).hide().end(); 

function rotate(i) { 
    statements.eq(i).delay(4000).fadeOut(800, function() { 
     i = ++i % statements.length; 
     statements.eq(i).fadeIn(800, function() { 
      rotate(i); 
     }); 
    }); 
} 
rotate(0); 

Answer 2

あなたはそれが正確に何をしたい行います使用することができるjQueryプラグインがあります。 jShowOff（http://ekallevig.com/jshowoff/）と呼ばれます。そこにあなたの開始を得なければならない例がうまくあります。