2014-11-01 77 views
0

我想在特定的時間間隔循環5頁。下面的代碼僅適用於遍歷所有頁面一次。我怎麼能這樣做,以便它無限循環通過這5頁,而不是隻運行一次?如何使用javascript自動循環頁面?

HTML

<div class="page">Page 2 Content</div> 
<div class="page">Page 3 Content</div> 
<div class="page">Page 4 Content</div> 
<div class="page">Page 5 Content</div> 

的Javascript

window.onload = function() { 

    var TIME_PER_PAGE = 2000; 
    var pages = document.querySelectorAll('.page'), 
     numPages = pages ? pages.length : 0; 
     i = -1; 

    function nextPage() { 
     if (i >= 0) 
      pages[i].classList.remove('currentPage'); 
     i++; 
     pages[i].classList.add('currentPage'); 
     if (i < numPages - 1) 
      setTimeout(nextPage, TIME_PER_PAGE); 
    } 

    nextPage(); 
} 
+0

使用* I%NUMPAGES *。那麼你將能夠無限使用* i *變量。 – 2014-11-01 21:03:52

回答

1

這裏是代碼片段和工作小提琴:http://jsfiddle.net/u62bqb62/1/

function nextPage() { 
    if (i >= 0) 
     $(pages[i]).removeClass('currentPage'); 

    i = ++i % numPages; 

    $(pages[i]).addClass('currentPage'); 

    setTimeout(nextPage, TIME_PER_PAGE); 
}