Question

当有人点击幻灯片时，如何暂停一个简单的幻灯片脚本？

我有一个Youtube视频幻灯片，循环显示这个脚本：

setInterval() { 
$('#videoSlides > div:first')
.fadeOut(0)
.next()
.fadeIn(2000)
.end()
.appendTo('#videoSlides');
},  15000);};

HTML如下（容器div，加上3个子div，每个包含一个嵌入的YouTube视频）：

<div id="videoSlides">
<div class="videoSlide"><iframe src="http://www.youtube.com/embed/VideoID"></iframe></div>
<div class="videoSlide"><iframe src="http://www.youtube.com/embed/VideoID"></iframe></div>
<div class="videoSlide"><iframe src="http://www.youtube.com/embed/VideoID"></iframe>
</div>
</div>

因此，虽然幻灯片显示在3个视频之间翻转，而有人点击其中一个视频，但该幻灯片应停在该幻灯片上。我该如何实现这一目标？

Answer 1

虽然其他答案指向正确的方向，但您应该注意另一件事：从嵌入式YouTube播放器中捕获点击事件并不像建议的那么容易，因为点击事件不会传播到播放器之外。< / p>

一个简单的解决方法是使用mouseenter事件，如下所示：

$('#videoSlides').mouseenter(function() {
    clearInterval(interval);
});

但这可能不会产生你想要的行为。

另一个更复杂的方法是使用youtube播放器api在视频开始时捕捉状态更改。您可以找到更多信息in the docs。

我整理了一个示例jsfiddle （不要忘记先在HTML部分插入您的视频ID！）

Answer 2

你去：

var interval=setInterval(function() { 
    $('#videoSlides > div:first')
    .fadeOut(0)
    .next()
    .fadeIn(2000)
    .end()
    .appendTo('#videoSlides');
}, 15000)};

$('#videoSlides').click(function(){
    clearInterval(interval);
});

Answer 3

我认为你问的是如何阻止你的间隔跑步。为此，在设置时，将其指定给变量。然后你可以这样使用clearInterval：

var mySlideShow = window.setInterval(function(){
    [Your transition code]
}, 15000);

//on click
window.clearInterval(mySlideShow);

单击停止视频幻灯片

3 个答案: