当复盖打开时暂停Flexslider

StackOverflow https://stackoverflow.com//questions/9608844

  •  09-12-2019
  •  | 
  •  

题

我们目前正在研究一个利用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.

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

有帮助吗？

解决方案

编辑

我想我知道这里发生了什么。问题是你有冲突的事件发生。

  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 mouseover，并在单击时恢复，因为Flexslider的mouseexit将在overlay的mouseover之前。

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

它看起来好像你可能不需要第二个黑客，尽管它是更好的代码。

其他提示

@jeff b，谢谢你的js修复。由于它不适用于FlexSlider的2.x分支，我认为它只是1.x

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

我面临与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-plus css透明度：0

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top