覆盖打开时暂停Flexslider

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

 $瓦特（ '＃滑块帧'）。flexslider（{
        动画：'淡出'，
         directionNav：false，
         slideshowSpeed：4000，
         controlNav：是的，
         pauseOnHover：true，
         manualControls：'＃indicator-dots li'，
         start：function（slider）{

             $ W（ '投资回报率，点击'）。点击（函数（）{
                 slider.trigger（ '的mouseenter'）;
             }）;

             $ w（'div＃ovrly，a＃close'）。click（function（）{
                 slider.trigger（ '鼠标离开'）;
             }）;

         }
     }）;

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

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

Answer 1

编辑

我想我弄清楚这里发生了什么。 问题是你发生了相互矛盾的事件。

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

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

 $w('#slider-frame').flexslider({ animation: 'fade', directionNav: false, slideshowSpeed: 4000, controlNav: true, pauseOnHover: true, manualControls: '#indicator-dots li', 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函数中重载这些函数。

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

这是一个显示mouseover解决方案的小提琴： http ： //jsfiddle.net/jtbowden/TWN5t/

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

Answer 2

@Jeff B，感谢JS修复。 由于它不适用于Flexslider的2.x分支，我认为它只适用于1.x.

对于那些2.x上的人，nvartolomei提交了一个修复程序： https ： //github.com/woothemes/FlexSlider/pull/322

Answer 3

我在使用brightcove + flexslider时遇到了同样的问题。 这是我的解决方法：

之前

  pausePlay: true, pauseText :"Pause", playText :"Play" 

然后

 video.addEventListener(BCMediaEvent.PLAY, function () { $('.flex-pauseplay .flex-pause').trigger('click'); }); video.addEventListener(BCMediaEvent.STOP, function () { $('.flex-pauseplay .flex-play').trigger('click'); }); 

.flex-pauseplay .flex-play css opacity：0