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)와 같은 다른 뭔가도 있습니다. 예를 들어, 당신은 그냥

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