Question

我有一个页面，我使用jquery fadeout（）＆amp ;;循环访问一组列表元素。淡入（）。

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

用户可以单击表示旋转中的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();

}）;

基本上，当你点击列表元素时，它：

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

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

3 个答案: