Question

我正在尝试将三个不同的html文件一个接一个地加载到div中，延迟时间为5秒。在它循环通过所有三个后，我希望它继续重复。我尝试使用超时来做到这一点，但它仍然无法工作。任何帮助将不胜感激..下面的代码片段

<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

未经测试，但你应该这样做：

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

请注意，这可能不适用于外部网址。

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

您可以使用它，而不是根据它们更改类。

如果您有超过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);

不同的页面加载到div延迟

3 个答案: