Question

使用jQuery我想循环遍历一个链接数组，并在设定的时间间隔后将每个链接的内容加载到DIV中。例如，如果我有我的父页面“parent.html”和一系列链接 - “test1.html，test2.html和test3.html”我想最初将test1.html加载到parent.html中的div中然后在设定的间隔后用test2.html替换test1.html，然后test3.html无限期地重复该过程。

如果有人可以帮助我，我真的很感激。我已经尝试过使用.get（）和setTimeout（）但是没有专业知识和经验将这些全部放在一起。任何帮助都会非常受欢迎。

谢谢。

Answer 1

这将做你想要的。

You can view a working demo here.它只加载每个链接一次，然后缓存结果。后续迭代只需从缓存中拉出。

$(function(){
   var curIdx = 0,
       urls   = $.map($("#links a"),function(el){ return $(el).attr('href') }),
       cache  = {};

   function nextPage(){
       var url  = urls[curIdx],
           data = cache[url];

       curIdx += 1; if(curIdx == urls.length) curIdx = 0;

       if(!data){
         $("#content").load(url, function(data){
           cache[url] = data;
           nextTimer();
         })
       } else {
         $("#content").html(data);
         nextTimer();
       }
   };

   function nextTimer(){
     window.setTimeout(function(){ nextPage() }, 3000); // 3 Seconds
   }

   nextPage();
});

<强> HTML

<ul id="links">
  <li><a href="test1.html">Test 1</a></li>
  <li><a href="test2.html">Test 2</a></li>
  <li><a href="test3.html">Test 3</a></li>
</ul>
<div id="content">

</div>

Answer 2

这将每2秒（2000毫秒）切换一次。在http://jsbin.com/owoxo

在线测试

<div id="link"><a href="#">#</a></div>

-

var l = ["index.html","pictures.html","contact.html"], c = 0;
setInterval(function(){
  $("#link a").attr("href",l[c]).html(l[c]);
  if (c++ > l.length) c = 0;
}, 2000);

Answer 3

DOM操作很昂贵。如果可以避免，请尽量不要这样做。

您加载的链接是静态还是动态？意味着一旦加载，你需要再次加载它们吗？如果答案是否则执行此操作：

<div id="carousel"></div>

使用CSS：

#carousel div { display: none; }

和

var pages = ["text1.html", "text2.html", "text3.html"];

$(function() {
  for (int i=0; i<pages.length; i++) {
    $("<div></div>").appendTo("#carousel").load(pages[i]);
  }
  setInterval(rotate_pages, 5000);
});

function rotate_pages() {
  var carousel = $("#carousel");
  var pages = $(carousel).children();
  var visible = pages.filter(":visible");
  if (visible.length == 0) {
    pages.get(0).fadeIn();
  } else {
    var index = pages.index(visible);
    index++;
    if (index >= pages.length) [
      index = 0;
    }
    visible.fadeOut(function() {
      pages.get(0).fadeIn();
    });
  }
}

这样你只需加载一次页面，只需隐藏/显示div就可以旋转它们。

Answer 4

我认为要求是加载链接页面的内容，而不仅仅是链接href？这是基于乔纳森的那个。

  <div id="content"></div>
  <script type="text/javascript">
    $(function(){
      var links = ["index.html","pictures.html","contact.html"];
      var curr  = 0;
      setInterval(function(){
        if (curr++ > links.length) curr = 0;
        $("#content").load(links[curr]);
      }, 2000);
    });
  </script>

循环遍历链接数组，并在设置的时间间隔后动态加载每个链接的内容

4 个答案: