javascript - 如何在 mouseleave 上禁用 bxSlider？

Question

是否可以在 mouseleave 上停用插件“bxSlider”？

$('.post').mouseenter(function() {   
         $('.content .bxSlider').each(function(){
             $(this).bxSlider({auto: 'true'});
         });
     }).mouseleave(function() {
         // ??
});

请指点...

Answer 1

你为什么要阻止它？你想让它只在悬停时自动前进吗？看着 options我相信你可以做到这一点:

$('.content .bxSlider').each(function(){
         $(this).bxSlider();
});

$('.post').mouseenter(function() {   
         $('.content .bxSlider').each(function(){
             $(this).startAuto();
         });
     }).mouseleave(function() {   
         $('.content .bxSlider').each(function(){
             $(this).stopAuto();
         });
});

自然地，这段代码可以稍微优化一下，也许可以使用一些变量来减少 dom 搜索的次数，但我认为这就是您所追求的:)

编辑

是的，上面的方法是行不通的。除非 slider 对象是变量，否则无法识别公共(public)函数。我不确定为什么，但这是我解决它的方法:

var sliders = []; // store for the sliders

$('.content .bxSlider').each(function() {
    sliders.push($(this).bxSlider({auto: false})); // create a slider and store it
});

$('.post').mouseenter(function() {   
         $.each(sliders, function(i){
             sliders[i].startAuto(); // start each slider
         });
     }).mouseleave(function() {   
         $.each(sliders, function(i){
             sliders[i].stopAuto(); // stop each slider
         });
});​

它在这里工作:http://jsfiddle.net/KBfx9/希望对您有所帮助!

编辑 2触发嵌套幻灯片的解决方案:

以前的解决方案是同时触发多个幻灯片。我在这里修改了:http://jsfiddle.net/KBfx9/1/触发嵌套幻灯片。 注意: 我只是使用类 .content 作为我的标识符而不是 post，因为在我的例子中后者是不需要的。此外，我还使用了容器的 index() 来识别相关的 slider ，因为这将在 OP 链接到的页面中起作用(在下面的评论中)。

希望这对您有所帮助:)