jquery – 覆盖打开时暂停Flexslider

我们目前正在开发一个利用Flexslider插件的项目(最近由Woo Themes收购).我们在此页面上有多个弹出窗口,我们希望滑块在弹出窗口处于活动状态时暂停,并在弹出窗口关闭时恢复.暂停只能在第一轮进行,并且恢复滑块不起作用.下面是我们用于滑块的代码.我尝试使用除“结束”调用之外的所有可用调用切换“启动”功能.

$w('#slider-frame').flexslider({
        animation: 'fade',directionNav: false,slideshowSpeed: 4000,controlNav: true,pauSEOnHover: true,manualControls: '#indicator-dots li',start: function(slider){

            $w('.roi-click').click(function(){
                slider.trigger('mouseenter');
            });

            $w('div#ovrly,a#close').click(function(){
                slider.trigger('mouseleave');
            });

        }
    });

该页面的链接是http://www.whitehardt.com/sandbox/whitehardt-v3.

任何有关这方面的帮助将不胜感激.

解决方法

编辑

我想我弄清楚这里发生了什么.问题是你发生了相互冲突的事件.

> Flexslider通过执行setInterval并将间隔ID存储在内部状态变量(slider.animatedSlides)中来启动动画.
>当您将鼠标悬停在幻灯片上时,Flexslider会暂停.它通过使用clearInterval()清除动画间隔来完成此操作.
>单击幻灯片中的roi链接,再次暂停,通过清除现在不存在的间隔.
>页面上有一个叠加层,这意味着您在Flexslider上执行鼠标移动,因此它使用setInterval()再次启动动画并存储间隔ID.
>关闭叠加层,方法是单击关闭按钮或叠加层,此时调用resume(),它也会执行setInterval(),覆盖存储的间隔ID.所以,现在你有两个动画,因此双倍速度.另外,下次调用pause()时,它只能访问清除您设置的最后一个间隔,因为它覆盖了存储的ID.因此,您无法再清除步骤3中的间隔.因此,您将在一个间隔动画前进(慢),鼠标中心和两个鼠标离开(快速)之间进行.

您可以暂停#ovrly鼠标悬停,然后单击继续,而不是暂停点击,因为Flexslider的mouseexit将在重叠鼠标悬停之前.

$w('#slider-frame').flexslider({
    animation: 'fade',start: function(slider){
        $w('div#ovrly').mouSEOver(function(){
            slider.pause();
        });
        $w('div#ovrly,a#close').click(function() {
            slider.resume();
        });
    }
});

但是,你可能会遇到类似的问题,这取决于当覆盖关闭时鼠标是否在滑块之上……但我不确定.理想情况下,Flexslider不会启动新动画.你可以将其破解为flexslider.js：

//FlexSlider: Automatic Slideshow Pause
slider.pause = function() {
  // Only pause if running
  if(slider.animatedSlides == null) {
      return;
  }

  clearInterval(slider.animatedSlides);

  // Clear the interval ID
  slider.animatedSlides = null;

  if (slider.vars.pausePlay) {
    slider.pausePlay.removeClass('pause').addClass('play').text(slider.vars.playText);
  }
}

//FlexSlider: Automatic Slideshow Start/Resume
slider.resume = function() {
  // Only resume if paused
  if(slider.animatedSlides != null) {
      return;
  }
  slider.animatedSlides = setInterval(slider.animateSlides,slider.vars.slideshowSpeed);
  if (slider.vars.pausePlay) {
    slider.pausePlay.removeClass('play').addClass('pause').text(slider.vars.pauseText);
  }
}

您可以在start：parameter函数中重载这些函数.

此更改将解决快速速度以及无法再次暂停的事实.当您的叠加层弹出时,您仍然会遇到滑块恢复的问题.这可以通过我之前提到的鼠标悬停解决方案来解决.

这是一个显示鼠标悬停解决方案的小提琴：http://jsfiddle.net/jtbowden/TWN5t/

它看起来好像你可能不需要第二次黑客攻击,虽然它是更好的代码.

jquery – 覆盖打开时暂停Flexslider

解决方法

相关推荐