Question

我们目前正在开发一个利用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。

对此的任何帮助将不胜感激。

Answer 1

<强>被修改

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

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

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

$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:参数函数中重载这些函数。

此更改将解决快速速度以及无法再次暂停的事实。当您的叠加层弹出时，您仍然会遇到滑块恢复的问题。这可以通过我之前提到的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

覆盖打开时暂停Flexslider

3 个答案: