Question

我有一个jQuery脚本滑过几个div。代码如下。我有两个问题需要解决：

当用户点击标签时重置或添加计时器。目前，它可能会立即切换到下一张幻灯片，具体取决于它在循环中的位置。
当用户将鼠标悬停在特定幻灯片上时，暂停计时器（即清除超时然后重新启动它）。

为了完成这些，我给了setTimeout一个变量（$ theTimeout）并尝试clearTimeout然后再次运行show_cycle_elem（）。无论我尝试多少种不同的方式（通过将其他事件（例如点击）投入到函数中，然后在setTimeout之后立即调用它们等），它似乎完全没有用。

有什么想法吗？

$(document).ready( function(){
var theId = 0;
function navClass(it){
    $('#hero nav a').removeClass('over');
    $(it).addClass('over');
}
$.fn.cycle = function(timeout){
    var $all_elem = $(this);
    show_cycle_elem = function(){
        if(theId == $all_elem.length) theId = 0;
        $all_elem.hide().eq(theId).fadeIn();
        navClass('#a' + theId);
        var $theTimeout = setTimeout(function(){show_cycle_elem(++theId)}, timeout);
    }
    show_cycle_elem();
}
$('div.hero_slide').cycle(10000);
$('#hero nav a').click( function(party){
    party.preventDefault();
    theId = this.id.substr(1);
    navClass($(this));
    $('.hero_slide').hide();
    $('#hero' + theId).fadeIn();
});
});

感谢。

Answer 1

Hah看起来像你试图用一些选项来构建一个流畅的滑块......我几个月前就有了这个想法，数字实际上并不像看起来那么容易。对于初学者我们使用jQuery，所以我们不妨用插件格式编写它，因为我们需要一个范围，我们可以声明和使用随时间变化的变量......

我会切入追逐;如果您想使用幻灯片/暂停它们，您需要控制超时ID，存储它并在需要时清除超时以防止下一个幻灯片动画......

我找了一些搞清楚但是我的工作版本只有一些非常基本的功能，但你至少可以开始/停止它并做下一个/上一个/兰德：

http://jsfiddle.net/sg3s/RFJMy/218/

因此，如果你想创建一个插件/功能来完成你所描述的事情，你需要重写一段代码，以便有一个能够在逻辑意义上实际处理中断的基础。

.click（jQuery）时暂停setTimeout

1 个答案: