javascript - 如何在 mouseleave 上禁用 bxSlider？

Question

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

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

请指教...

Answer 1

你为什么要阻止它？您是否希望它仅在悬停时自动前进？看看我相信你可以做到的选项：

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

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

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

编辑

对了，上面的行不通。除非滑块对象是变量，否则无法识别公共函数。我不知道为什么，但这是我解决它的方法：

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()来识别相关滑块，因为这将在 OP 链接到的页面中工作（在下面的评论中）。

希望这能为你分类:)