如何自動切換網站的網頁，使用JavaScript創建的網頁？

我想創建的網站大多會看起來像一個沒有用戶輸入的演示文稿。用戶必須瀏覽我的網站，他將能夠看到圖像滑動，並且在定期的時間間隔之後頁面必須自動更改。我想知道如何在定期的時間間隔內使用JavaScript切換我的網站頁面。如何自動切換網站的網頁，使用JavaScript創建的網頁？

來源

2013-09-21 Sandy

你有沒有進去看了'的setTimeout（）'功能和/或['window.location'（https://developer.mozilla.org/en-US/docs/Web/API/window。位置＃Example_.231.3A_Navigate_to_a_new_page）呢？如果沒有，[你還試過了什麼？]（http://mattgemmell.com/2008/12/08/what-have-you-tried/） – nnnnnn

總之一句話：Ajax。 – yuvi

是的，我不會留在一個網站很長，如果它不停地跳頁來改變圖像哈哈。檢查出一些圖像滑塊和jQuery的東西。 – FaddishWorm

嘗試類似這樣的可能 - 其中2000是2秒（2000毫秒）。

setTimeout(function(){document.location='http://google.com.au';}, 2000);

http://www.w3schools.com/jsref/met_win_settimeout.asp

來源

2013-09-21 13:35:47 FaddishWorm

「這樣的事情」你的意思是'setTimeout（function（）{document.location ='http：//google.com.au';}，2000）;'？（你已經顯示的代碼將立即設置位置，它不會等待兩秒鐘。） – nnnnnn

你是對的，謝謝:) – FaddishWorm

setInterval將是很好。例如：

var interval = setInterval(switchPage, 2000) 
function switchPage(){ 
    //with use of Jquery 
    var active = $('.page.active'), next = active.next(); 
    if(next.length !== 0){ 
     active.fadeOut(); 
     next.fadeIn(function(){ 
      active.removeClass('active'); 
      next.addClass('active'); 
     }); 
    } 
}

來源

2013-09-21 13:43:12 Michael

這裏有一種方法可以在一個頁面中完成。實質上，每個TIME_PER_PAGE時間間隔，您切換「page」div，並在下一頁中進行分配。內聯樣式表確保只有當前頁面可見並且佔據屏幕的全部大小。

<html> 
    <head> 
     <style> 
      body, html { 
       height: 100%; 
       overflow: hidden; 
       padding: 0; 
       margin: 0; 
      } 

      .page { 
       top: 0; 
       left: 0; 
       width: 100%; 
       min-height: 100%; 
       position: absolute; 
       display: none; 
       overflow: hidden; 
       border: 0; 
      } 

      .currentPage { 
       display: block; 
      } 
     </style> 
    </head> 
    <body> 
     <script> 
      var TIME_PER_PAGE = 2000; 
      window.onload = function() { 
       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(); 
      } 
     </script> 

     <div class="page">Page 1 Content</div> 
     <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> 
    </body> 
    </html>

來源

2013-09-21 13:51:30

+1不錯的答案，這是要走的路。這應該是一個jsfiddle。 –

你如何讓它再次循環？ – Chris

用i =（i + 1）％numPages替換i ++;擺脫「如果（我

如何自動切換網站的網頁，使用JavaScript創建的網頁？

回答

相關問題