jquery - 创建基于 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

您应该让您的 setTimeout 指向您希望每次触发的函数，并且让该函数也再次调用 setTimeout。它实际上是无限轮询，但具有内置延迟。如果你想打破它，它还可以让你设置一个标志（即不再调用 setTimeout）。

Answer 3

还有像 jquery 插件 ( jQuery webTicker ) 之类的其他东西可以为您完成所有工作。例如，您可以只做一个未排序的列表

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

在它上面使用 jquery

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

这将自动启动您的旋转脚本，您还需要一些附加的 CSS，这些 CSS 是随插件本身提供的，用于可以修改的样式。该脚本包括当鼠标在 webticker 上时自动停止功能，同时您可以按照下载网站上的webticker 示例中的说明进行淡入和淡出效果

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