1


1

リンクの配列をループし、設定された間隔後にそれぞれのコンテンツを動的にロードします

jQueryを使用して、リンクの配列をループし、設定された間隔の後、各リンクのコンテンツをDIVにロードします。 たとえば、親ページ「parent.html」とリンクの配列「test1.html、test2.html、test3.html」がある場合、最初にtest1.htmlをparent.html内のdivにロードし、設定された間隔の後、test1.htmlをtest2.htmlに置き換え、次にtest3.htmlをプロセスを無期限に繰り返します。

誰かが私を助けてくれたら本当にありがたいです。 .get()とsetTimeout()を使用してみましたが、これをまとめるための専門知識と経験がありません。 どんな助けでも大歓迎です。

ありがとうございました。

4 Answer


3


これはあなたが望むことをするでしょう。

ここで実際のデモを見ることができます。各リンクを一度だけロードし、結果をキャッシュします。 後続の反復は、単にキャッシュからプルします。

$(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 *

  Test 1
  Test 2
  Test 3


1


これは2秒(2000ミリ秒)ごとに切り替わります。 http://jsbin.com/owoxoでオンラインでテストする

#

 — --

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);


0


DOM操作は高価です。 回避できる場合は、行わないようにしてください。

ロードするリンクは静的ですか、それとも動的ですか? 一度ロードされたら、再度ロードする必要がありますか? 答えがいいえの場合、これを行います:


CSSで:

#carousel div { display: none; }

and:

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

$(function() {
  for (int i=0; i").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を非表示/表示するだけでページを回転できます。


0


要件は、リンクhrefだけでなく、リンクページのコンテンツを読み込むことだと思いますか? これはジョナサンのものに基づいています。

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