如何通過一堆句子循環

我有一個包含一堆語句的div。我現在將這些陳述組織在一個<ul>列表中，但這可能會改變。我怎樣才能以旋轉的方式顯示這些陳述（每個可能每4秒鐘一次）。我也在尋找一個暫停按鈕來保持當前的聲明，但我想首先得到基本的東西。如何通過一堆句子循環

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

來源

2011-01-29 zmol

例子：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()函數，它啓動整個過程。

如果你不想i污染命名空間，它作爲參數傳遞給rotate()這樣的：

例子：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);

來源

2011-01-29 01:20:48 user113716

@patrick dw +1非常感謝。不要聽起來完全密集，但如果我的標記看起來像這樣http://jsfiddle.net/SmJMP/，我在每個語句div中有2個div。 – zmol 2011-01-29 01:47:41

有，您可以使用，將做你想要什麼jQuery插件。它被稱爲jShowOff（http://ekallevig.com/jshowoff/）。有充足的例子可以讓你開始。

來源

2011-01-29 01:24:39

如何通過一堆句子循環

回答

相關問題