Question

我写了小新闻自动收报机，请看这里：http://jsfiddle.net/MrTest/SvFRs/

我想添加它 - 自动滚动（每隔几秒点击'下一步'）。另外，如果用户在不到5秒的时间内与其进行交互或当前正在悬停，我该如何阻止执行此操作的脚本？

不幸的是，我不知道如何开始。有线索吗？

任何帮助非常感谢。

皮特

Answer 1

以下是我更改的代码。基本上你所做的就是为一个区间id分配一个timeout，然后在你不希望它改变时清除它，并在你做的时重置它。

// Set a timeout
var timeOut = setTimeout(nextNotice, 3000);

// pause on hover
$('.noticeboard').hover(
    function(){clearTimeout(timeOut);},
    function(){timeOut = setTimeout(nextNotice, 3000);}
)
// Next notice function called on timeout or click
function nextNotice(event){
    clearTimeout(timeOut);
    timeOut = setTimeout(nextNotice, 3000);

    if ($('.noticeboard span:visible').is('.noticeboard span:last-child')) {
        $('.noticeboard span:visible').fadeOut();
        $('.noticeboard span:first-child').fadeIn();
    }
    else {
        $('.noticeboard span:visible').fadeOut().next().fadeIn();
    }

    if(event){
        event.preventDefault(); 
    }
}


$('#notice-next').click(nextNotice);

Answer 2

最好的方法是将您的下一个和上一个事件转换为函数。然后，您可以使用setInterval来调用下一个函数。你需要保持计数，这样当你到达目的地时，你可以再次显示第一个。您可以使用clearInterval停止代码。

希望有助于指明你正确的方向。

简单的新闻自动收录器 - 如何使用jQuery进行自动滚动/自动操作性能？

2 个答案: