javascript - jQuery无限轮播自动播放需要在嵌入式视频上按下播放时停止

Question

这里的问题示例：http: //jsfiddle.net/EtWXX/

我将无限轮播设置为自动播放。它还嵌入了视频。但是，我需要它做两件事。

1. 播放视频时停止。
2. 如果与“下一个”和“上一个”交互，则停止。

Answer 1

您只需要在clearInterval(intervalId)与事物交互时调用，然后intervalId = window.setInterval(slide, 5000);在您希望它再次开始滑动时再次设置它。如果您希望它在悬停时暂停，您可以执行以下操作：

$('#viewport').hover(
     function(){clearInterval(intervalId);},
     function(){intervalId = window.setInterval(slide,5000);}
);

我不知道检测 vimeo 视频播放与否的代码是什么，但以这种方式打开/关闭滚动是微不足道的。

编辑

对于 vimeo，您应该查看他们的API，您必须在 vimeo ?api=1URL 的末尾添加iframe并加载他们的名为froogaloop的库，您可以使用它来执行此操作：

        jQuery('iframe.vimeo').each(function(){
            $f(this).addEvent('play', function(){clearInterval(intervalId);});
            $f(this).addEvent('stop', function(){intervalId = window.setInterval(slide,5000);});
        });

当您播放视频时应该停止幻灯片，并在视频停止时重新启动它，它正在侦听来自 API 的事件

至于上一个和下一个，只需在插件代码之后jQuery(next).click(function(event) {和之后添加明确的间隔jQuery(prev).click(function(event) {，我不知道你想如何恢复幻灯片，但我们已经知道代码......