中断循环以启动 .click 事件，然后重新启动循环答案

【问题标题】：interrupt a loop to start a .click event then restart the loop中断循环以启动 .click 事件，然后重新启动循环
【发布时间】：2012-08-08 11:00:39
【问题描述】：

我会说出我的意思：

http://www.pixel3.it/marco/jslide/slide.html

我有一个基本的 .click 幻灯片，它可以通过按下下面的小方块在每个彩色框内滑动。 '到目前为止一切都很好。

现在我真的想让彩色框永远循环，所以我使用以下代码：

$(document).ready(function runIt(){
    $('#slider').animate({marginLeft: "0"}, 500).delay(5000);
    $('#slider').animate({marginLeft: "-900"}, 500).delay(5000);
    $('#slider').animate({marginLeft: "-1800"}, 500).delay(5000);
    runIt;
});

效果很好，但我不能再手动切换这些框了。

我想知道是否可以混合这两段代码：

    $('#slider').animate({marginLeft: "0"}, 500).delay(5000);
    $('#slider').animate({marginLeft: "-900"}, 500).delay(5000);
    $('#slider').animate({marginLeft: "-1800"}, 500).delay(5000);
    runIt;
});

    $('a#but1').click(function(){
    $('#slider').animate({marginLeft: "0"}, 500)
    });

    $('a#but2').click(function(){
    $('#slider').animate({marginLeft: "-900"}, 500)
    });

    $('a#but3').click(function(){
    $('#slider').animate({marginLeft: "-1800"}, 500)
    });
});

使框循环，直到我按下其中一个彩色方块，它会执行其 .click 事件，然后重新启动循环。

编辑：我尝试将 .stop() 添加到每个 .click 事件但不起作用。

EDIT2（几乎解决了）：经过一番搜索，幸运的是，我找到了这个插件：http://flesler.blogspot.com/2007/10/jqueryscrollto.html 我认为这对我也有帮助。

现在只使用那个循环插件我的代码是：

$('#slider').cycle({fx: 'scrollLeft',
                speed:    500, 
                timeout:  5000});

    $('a#but1').click(function() { 
        $('#slider').cycle(0); 
        return false; 
    }); 

    $('a#but2').click(function() {  
        $('#slider').cycle(1);  
        return false;  
    }); 

    $('a#but3').click(function() { 
        $('#slider').cycle(2); 
        return false; 
    }); 


});

遗憾的是，这个插件不会滚动所有帧，而只会滚动当前帧和下一个帧。我的意思是，如果我在幻灯片位于第一个框时按下第三个方块，则在动画期间不考虑第二个框。希望我是对的，因为我已经阅读了循环插件文档，但没有找到任何命令。

【问题讨论】：

标签： events animation loops click margin

【解决方案1】：

使用 jquery 幻灯片 (http://jquery.malsup.com/cycle/) 之类的东西可能会更好地处理您的转换。

这样的循环可能永远不允许发生事件管理，并且可能是导致您的点击事件似乎没有触发的原因。他们可能正在等待循环完成，然后才会被处理。所以实际上你已经创建了一个无限循环并且你的事件正在等待。

【讨论】：