如何中断/暂停内容滑块的无限循环 Jquery 函数？

Question

我有一个页面，我使用 jquery fadeout() & 循环浏览一组列表元素。淡入淡出（）。

一切工作正常，除了我现在想要这样：

• 用户可以单击代表旋转中的 li 的单独元素。
• 当他们点击该元素时，当前的动画循环停止，
• 相应的内容li被加载，
• 动画恢复。

我相信我需要使用 jquery 队列来做到这一点，但想知道是否有一个我忽略的更简单的解决方案。

这是我的代码：

$(document).ready(function () {

var j = 0;
var fadetime = 700;
var delay = 3000; //millisecond delay between cycles
function cycleThru() {
    var jmax = $("ul#rotator li").length - 1;
    $("ul#rotator_pager li:eq(" + j + ")").css("background-color", "#660000");

    $("ul#rotator li:eq(" + j + ")").fadeIn(fadetime).delay(delay);

    $("ul#rotator li:eq(" + j + ")").fadeOut(fadetime, function () {
        $("ul#rotator_pager li:eq(" + j + ")").css("background-color", "");            
        (j == jmax) ? j = 0 : j++;            
        cycleThru();
    });

};

//Setup the clickers on the pager boxes. 
$("ul#rotator_pager li").click(function () {

    //Switch to this list element and resume animation cycle.

});


cycleThru();

});

对应的 HTML --

<ul id="rotator">
<li id="first">
    <div><!--HTML Goes HERE--></div>
</li>
<li>
    <div><!--HTML Goes HERE--></div>
</li>
<li>
    <div><!--HTML Goes HERE--></div>
</li>
</ul>
<ul id="rotator_pager">
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
</ul>

Answer 1

使您的递归函数调用依赖于全局布尔变量：

if (!window.end_loop) {
    cycleThru();
}
...
$('ul#rotater_pager li').click(function() {
    window.end_loop = true;
}

Answer 2

您可以将动画设置为 var，这样您就可以在单击时清除它。

$(document).ready(function () {

var j = 0;
var fadetime = 700;
var delay = 3000; //millisecond delay between cycles
var cycle;
function cycleThru() {
    var jmax = $("ul#rotator li").length - 1;
    $("ul#rotator_pager li:eq(" + j + ")").css("background-color", "#660000");

    $("ul#rotator li:eq(" + j + ")").fadeIn(fadetime).delay(delay);

    $("ul#rotator li:eq(" + j + ")").fadeOut(fadetime, function () {
        $("ul#rotator_pager li:eq(" + j + ")").css("background-color", "");
        if (j != userj)
        { j = userj }
        else {
            (j == jmax) ? j = 0 : j++;
            userj = j;
        }
        cycle = setTimeout(function(){
            cycleThru();
          }, 10);
    });

};

//Setup the clickers on the pager boxes. 
$("ul#rotator_pager li").click(function () {

    clearTimeout(cycle);
    //Switch to this list element and resume animation cycle.

});


cycle = setTimeout(function(){
   cycleThru();
}, 10);
});

Answer 3

所以，我离开它几分钟并弄清楚了。您确实需要使用 Jquery 队列，但它并不像我想象的那么复杂。这是其他人的解决方案：

$(document).ready(function () {

var j = 0;
var fadetime = 700;
var delay = 3000; //millisecond delay between cycles
function cycleThru() {
    var jmax = $("ul#rotator li").length - 1;
    $("ul#rotator_pager li:eq(" + j + ")").css("background-color", "#660000");

    $("ul#rotator li:eq(" + j + ")")
        .fadeIn(fadetime)
        .delay(delay)
        .fadeOut(fadetime, function () {
            $("ul#rotator_pager li:eq(" + j + ")").css("background-color", "");
            (j == jmax) ? j = 0 : j++;
            cycleThru();
        });

};

//Setup the clickers on the pager boxes. 
var items = $("ul#rotator_pager li").click(function () {
    $("ul#rotator li:eq(" + j + ")").clearQueue();
    $("ul#rotator li:eq(" + j + ")").stop();
    $("ul#rotator li:eq(" + j + ")").hide();
    $("ul#rotator_pager li:eq(" + j + ")").css("background-color", "");
    j = items.index(this);
    cycleThru();
    //Switch to this list element and resume animation cycle.

});


cycleThru();

});

基本上，当您单击列表元素时，它会：

• 清除所有动画（出队和.stop），
• 隐藏当前显示的内容列表元素，
• 最后将内容列表元素的选择器设置为相应的选定列表元素
• ，开始再次播放动画。