不同的頁面加載到div與延遲

Question

我試圖加載三個不同的HTML文件到一個div，一個接一個，延遲5秒。在三個循環中，我希望它繼續重複。我試着使用超時要做到這一點，但它仍然沒有working.Any幫助將不勝感激..下面

<script type="text/javascript"> 
    $(document).ready(function() { 

     jQuery(window).load (function timeout() { 
      setTimeout(function() { 
       if($("#news_sections").hasClass("news1")){ 
        $("#news_sections").attr('class', "news2"); 
        $("#news_sections").load("section2.html"); 
       }else if($("#news_sections").hasClass("news2")){ 
        $("#news_sections").attr('class', 'news3'); 
        $("#news_sections").load("section3.html"); 
       }else{ 
        $("#news_sections").attr('class', 'news1'); 
        $("#news_sections").load("section1.html"); 
       }; 

       timeout(); 

      }, 4000); 
     }); 
    }); 
    }); 
</script> 

Answer 1

你可以使用它，而不是改變類，並根據它們。

如果您有超過10個sectionX.html文件，您需要在其中編寫大量代碼。因此，如果您創建計數器，則只需將if聲明更改爲(count > X)，其中X =您擁有的模板數。

var count = 1; 

setInterval(function() { 
    // If the count is more 3, we reset the count to 1. 
    if (count > 3) { 
    count = 1; 
    } 

    // If you are using "newsX" class for looping propose only, 
    // You can remove .attr() method in my solution. 
    $("#news_sections").attr('class', "news" + count); 

    // clear news section 
    $("#news_sections").empty(); 

    // Load the count number sectionX.html file 
    // Also increase count number with 1 (count++) 
    $("#news_sections").load("section" + count++ + ".html"); 

}, 1500); 

Answer 2

你的代碼的代碼片段似乎有點令人費解，你可能不應該使用setTimeout的那樣。我相信你要找的是setInterval，它每X毫秒重複執行一次相同的功能。

我簡化了一下。首先，聲明loopNews()函數，然後在文檔準備就緒時設置超時調用。

function loopNews(){ 
    if($("#news_sections").hasClass("news1")){ 
     $("#news_sections").attr('class', "news2"); 
     $("#news_sections").load("section2.html"); 
    }else if($("#news_sections").hasClass("news2")){ 
     $("#news_sections").attr('class', 'news3'); 
     $("#news_sections").load("section3.html"); 
    }else{ 
     $("#news_sections").attr('class', 'news1'); 
     $("#news_sections").load("section1.html"); 
    } 
} 

$(document).ready(function() { 
    window.setInterval(loopNews, 5000); 
}); 

Answer 3

未經測試，但你應該做這樣的事情：

$(function(){ 
    var curIdx = 0, /* internal counter */ 
     urls = ['page1.html','page2.html','page3.html'], /* your urls*/ 
     doCache = true, /* set to false to disable caching */ 
     cache = {} /* storage */; 
    function nextPage(){ 
     var data = false, 
      url = urls[curIdx]; 
     if(doCache && cache[url]) { 
      data = cache[url]; 
     } 
     curIdx += 1; 
     // all urls displayed - reset counter, show first page again 
     if(curIdx == urls.length) { 
      curIdx = 0; 
     }    
     // load data (and cache it, if doCached option is true) 
     if(!data){ 
      $("#content").load(url, function(data){ 
       cache[url] = data; 
       nextTimer(); 
      }) 
     } else { 
      $("#content").html(data); 
      nextTimer(); 
     } 
    }; 
    // now to timeout 
    function nextTimer(){ 
     window.setTimeout(function(){ nextPage() }, 5000); // 5 Seconds 
    } 
    // and run it... 
    nextPage(); 
}); 

請注意，這可能不外部URL工作。