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，您必须将 ?api=1 添加到 iframe 的 vimeo URL 的末尾并加载他们的名为 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) { 之后添加清除间隔，虽然我不知道你想如何恢复幻灯片，但我们已经知道代码...