Проходить по массиву ссылок и динамически загружать содержимое каждого через заданный интервал - PullRequest
Новая
       11

Проходить по массиву ссылок и динамически загружать содержимое каждого через заданный интервал

1 голос
/ 12 января 2010

Используя jQuery, я хотел бы перебрать массив ссылок и загрузить содержимое каждой ссылки в DIV через заданный интервал. Например, если у меня есть родительская страница «parent.html» и массив ссылок - «test1.html, test2.html и test3.html», я хотел бы изначально загрузить test1.html в div в parent.html затем через заданный интервал замените test1.html на test2.html, а затем test3.html повторяйте процесс бесконечно.

Я был бы очень признателен, если бы кто-нибудь мне помог. Я пытался использовать .get (), а также setTimeout (), но просто не имею опыта и опыта, чтобы собрать все это вместе. Любая помощь будет приветствоваться.

Спасибо.

Ответы [ 4 ]

3 голосов
/ 12 января 2010

Это будет делать то, что вы хотите.

Рабочую демонстрацию можно посмотреть здесь. Она загружает каждую ссылку только один раз, а затем кэширует результат. Последующие итерации просто вытаскивают из кеша. 

$(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>
1 голос
/ 12 января 2010

Это будет переключаться каждые 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);
0 голосов
/ 12 января 2010

Я бы предположил, что требуется загрузить содержимое связанной страницы, а не только ссылку 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>
0 голосов
/ 12 января 2010

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, если это необходимо для их поворота.

...