Создание javascript-основанного новостного тикера

Question

Я создаю тикер, и вам нужно, чтобы он работал до тех пор, пока страница, очевидно, не будет закрыта или перемещена от нее.

Этот сценарий будет просто езда на велосипеде через Ли (это то, что у меня до сих пор):

$("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), который делает всю работу за вас. Например, вы можете просто сделать несортированный список

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

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

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

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

Answer 4

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

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