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

Question

我会告诉我的意思：

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


});

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

Answer 1

jquery 幻灯片（http://jquery.malsup.com/cycle/）之类的东西可能会更好地帮助您处理过渡。

像这样的循环可能永远不允许事件管理发生，并且可能是您的点击事件似乎没有触发的原因。他们可能正在等待循环完成才能对其进行处理。因此，实际上您已经创建了一个无限循环，并且您的事件正在排队等待。