Question

如何首先停止flexslider然后在悬停时播放？并且在同一页面上额外挑战theres multiple。这可以工作但是

它崩溃了jquery并且没有任何效果（我错过了一些标记？）

如果用户跳转到浏览器上的另一个标签，那么十几个flexsliders会同时开始播放（这是因为窗口加载或者什么 - 只有当从另一个浏览器标签切换回来时才会出现这种情况）

$(window).load(function() {

$('.preview').each(function(index){

if($(".preview").eq(index).length) {

$('.preview').eq(index).flexslider({
    slideshowSpeed: 225,
    animationSpeed: 150,
    initDelay: 0,  
    useCSS: true,
    animation: "fade",
    controlNav: false,
    directionNav: false,
    start: function(slider) {
        $('.preview').removeClass('loading');
        slider.pause();
        slider.manualPause = true;
        slider.mouseover(function() {
            slider.manualPause = false;
            slider.play();
        });
        slider.mouseout(function() {
            slider.manualPause = true;
            slider.pause();
        });
    },
    keyboard: false 
});

}

})

});

如果您有一个滑块但我在同一页面上有多个滑块，则下面的答案是完美的。

（我也很确定eq什么也没做，或者设置不正确）

Answer 1

从初始化中删除start回调，然后尝试：

$(document).on("hover", ".flex-viewport img", function() {
    $('.preview').play();
}, function() {
    $('.preview').pause();
});

Answer 2

好的，明白了。答案是幻灯片：false，

$('.preview').flexslider({
    slideshowSpeed: 225,
    animationSpeed: 150,
    slideshow: false,
    initDelay: 0,  
    useCSS: false,
    animation: "fade",
    animationLoop: false,
    pauseOnHover: false,
    controlNav: false,
    directionNav: false,
    start: function(slider) {
        $('.preview').removeClass('loading');
        slider.pause();
        slider.manualPause = true;
        slider.mouseover(function() {
            slider.manualPause = false;
            slider.play();
        });
        slider.mouseout(function() {
            slider.manualPause = true;
            slider.pause();
        });
    },
    keyboard: false 
});

在悬停上玩flexslider？

2 个答案: