HTML5 页面可见度 API & fullpage.js 自动幻灯片

Question

我正在尝试修改看到的自动播放幻灯片方法 here，以在用户切换到另一个选项卡时停止。

这样，当用户切换时自动停止播放，he/she returns 幻灯片还没有自动循环。当用户回来时，自动循环应该会继续。

HTML5 可见性 API 函数应如下所示：

document.addEventListener("visibilitychange", function() {

if (document.hidden) {     
//stops the autoplay slider

} else {
//resumes the autoplay slider
}});

到目前为止，我已经尝试简单地添加一个变量，其中应该是“15000”数字，但这种方法不起作用。

afterRender: function () {
    slideTimeout = setInterval(function () {
         $.fn.fullpage.moveSectionDown();
        }, 15000);

    }

有什么方法可以让它工作吗？

提前致谢

Answer 1

试试这个：

var slideTimeout;

function startAutoPlay(){
   slideTimeout = setInterval(function () {
       $.fn.fullpage.moveSectionDown();
   }, 15000);
}

function stopsAutoPlay(){
   clearInterval(slideTimeout);
}

document.addEventListener("visibilitychange", function(){
    if(document.hidden){     
       stopsAutoPlay();
    }
    else{
       startsAutoPlay();
    }
});

HTML5 页面可见度 API & fullpage.js 自动幻灯片

HTML5 page visibility API & fullpage.js autoslides

javascript

jquery

fullpage.js