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

Question

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

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

спасибо.

Answer 1

Это будет переключаться каждые 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 2

манипуляции 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(); 
    }); 
    } 
} 

Таким образом, вы только загружать страницы один раз и просто скрыть/показать дивы как необходимо было вращаться через них.

Answer 3

Это сделает то, что вы хотите.

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