demo

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）这样的东西可以为你完成所有工作。例如，您可以只执行未排序的列表

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

创建基于Javascript的新闻自动收报机

4 个答案:

demo