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

Question

我有这个幻灯片。可以看demo：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) ;
})

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