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 slideshow（http://jquery.malsup.com/cycle/）来处理你的过渡。

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

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

1 个答案: