создание новостного тикера на основе 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);

демо

Answer 2

Чтобы добавить к блестящему ответу Рейгеля,

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);

Answer 3

Есть также что-то еще, например плагин jquery ( jQuery webTicker ), который сделает всю работу за вас.Например, вы можете просто сделать несортированный список

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

использовать jquery поверх него

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

, и это автоматически запустит вращающийся скрипт, вам также понадобится дополнительный CSS, которыйпредусмотрены вдоль самого плагина для стиля, который может быть изменен.Скрипт включает в себя и функцию автоматической остановки, когда мышь находится над вебтикером, в то время как вы можете иметь эффекты постепенного появления и исчезновения, как описано в примере вебтикер на веб-сайте загрузки

Answer 4

Ваш setTimeout должен указывать на функцию, которую вы хотите запускать каждый раз, и эта функция также должна снова вызывать setTimeout.Это фактически бесконечный опрос, но со встроенной задержкой.Это также позволяет вам установить флаг, если вы хотите сломать (то есть, не вызывая setTimeout снова).