HTML5頁面可見性API＆fullpage.js autoslides

Question

我試圖修改自動播放幻燈片的方法看到here，當用戶切換到另一個選項卡時停止。

這樣，當用戶離開時以及他/她返回幻燈片時自動循環還沒有自動循環。當用戶回來時，自動循環應該繼續。

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(); 
    } 
});