jquery - 如何自动播放此幻灯片

Question

我有这个幻灯片。你可以看到演示:http://jsfiddle.net/handoi912/Yh6Lp/

现在，我想要自动播放幻灯片，但我做不到。请帮我!谢谢!

    <script type="text/javascript">
    $(function() {
        $('#cn-slideshow').slideshow();
    });
</script>

Answer 1

如何使用 trigger , 触发下一个按钮的点击事件。您可以通过这种方式保持原始幻灯片的完整性。

您将在准备好文档时运行它:

setInterval(function(){
  $('.cn-nav-next').trigger('click');}, 
3000);

你可以在这里看到它的实际效果: http://jsfiddle.net/burnsjeremy/SrkzD/

编辑:我的第一个答案有点困扰我，所以我更新了它以分离出一些代码。我还添加了一个鼠标悬停以停止自动播放功能，直到鼠标移出。您可以在此处看到实际效果:http://jsfiddle.net/burnsjeremy/pHrvJ/

来自编辑的代码将使幻灯片停止播放，以便用户可以像往常一样浏览幻灯片。

var intervalStart = setInterval(function () {
    $('.cn-nav-next').trigger('click');
},
3000);
// Stop slideshow on mouseover, and mouseout start back
$('#cn-slideshow').mouseover(function(){
    clearInterval(intervalStart);
}).mouseout(function(){
    intervalStart = setInterval(function(){
        $('.cn-nav-next').trigger('click');
    }, 3000) ;
})

这应该足以让您开始轻松解决这个问题。谢谢!