Javascriptベースのニュースティッカーを作成

Question

私は並べ替えのティッカーを作成しており、ページが明らかに閉じられるかナビゲートされるまで実行しておく必要があります。

このスクリプトは、単に（これは私がこれまで持っているものである）のLiを巡回されます。

明らか

$("li").hide(); //hides all "li" onload 
var lis = $("ul").children("li").size(); //counts how many "li"s there are 
var count = 0; 
while(true) 
{ 
    count++; 
    if(count>lis) //checks if count needs to be reset 
    count = 1; 

    $("li:nth-child(" + count + ")").fadeIn('slow'); 
    setTimeout('', 4000); 
} 

ページがあるため、無限ループの負担はありません。どのように私はこれについて行く必要がありますについて誰も提案がありますか？

Answer 1

var ticker = $('ul.ticker'); 
ticker.children(':first').show().siblings().hide(); 

setInterval(function() { 
    ticker.find(':visible').fadeOut(function() { 
     $(this).appendTo(ticker); 
     ticker.children(':first').show(); 
    }); 
},2000); 

demo

Answer 2

setTimeoutは、毎回起動したい機能を指し、その機能にsetTimeoutを再度呼び出さなければなりません。事実上無限のポーリングですが、遅延が組み込まれています。また、フラグを設定することもできます（setTimeoutをもう一度呼び出さない）。

Answer 3

あなたのためのすべての作業を行いjQueryプラグイン（jQuery webTicker）のような何か他のものもあります。たとえば、あなたはそれ

jQuery('#webticker').webTicker(); 

の上にソートされていないリストに

<ul id='webticker'> 
    <li>text</li> 
</ul> 

使用jqueryのを行うことができ、これは自動的に回転するスクリプトを起動しますあなたはまた、プラグインに沿って設けられているいくつかの追加のCSSが必要になります変更可能なスタイリングのためのものです。このスクリプトは、含まれており、マウスを使用して、フェードインを持っているとReigelの華麗な答えに追加するには、ダウンロードのウェブサイト

Answer 4

にwebticker exampleで説明したような効果をフェードアウトすることができますしながらwebtickerの上にある自動停止機能

var ticker = $('ul.ticker'); 
ticker.children(':first').show().siblings().hide(); 

setInterval(function() { 
ticker.find(':visible').fadeOut(function() { 
    $(this).appendTo(ticker); 

    // fadeIn() rather than show() here to create a continuously fading effect. 

    ticker.children(':first').fadeIn(); 
}); 
},2000);