4

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

$w('#slider-frame').flexslider({
        动画：'淡入淡出'，
        方向导航：假，
        幻灯片速度：4000，
        控制导航：真，
        pauseOnHover: 真,
        manualControls: '#indicator-dots li',
        开始：功能（滑块）{

            $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。

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

4

3 回答 3

4

已编辑

我想我知道这里发生了什么。问题是您正在发生相互冲突的事件。

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

您可以在鼠标悬停时暂停，而不是在单击时暂停#ovrly，然后在单击时恢复，因为 Flexslider 的鼠标退出将在覆盖层的鼠​​标悬停之前。

$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/

看起来你可能不需要第二次破解，尽管它是更好的代码。

于 2012-03-07T21:00:57.410 回答
1

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

对于那些在 2.x 上的，nvartolomei 已经提交了一个修复： https ://github.com/woothemes/FlexSlider/pull/322

于 2012-09-11T12:16:11.170 回答
0

我在使用 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 不透明度：0

于 2015-03-20T14:18:46.557 回答