링크 배열을 통해 반복하고 설정된 간격 후에 각각의 내용을 동적으로로드하십시오.

jQuery 사용 링크 배열을 반복하고 설정된 간격 후에 각 링크의 내용을 DIV에로드하고 싶습니다. 예를 들어 부모 페이지 "parent.html"과 링크 배열 ("test1.html, test2.html and test3.html")이 있다면 parent1.html 내의 div에 초기에 test1.html을로드하고 싶습니다. 그런 다음 설정된 간격 후에 test1.html을 test2.html로 바꾼 다음 test3.html 프로세스를 무한 반복합니다.링크 배열을 통해 반복하고 설정된 간격 후에 각각의 내용을 동적으로로드하십시오.

누군가 나를 도울 수 있다면 정말 고맙겠습니다. 나는 .get()과 setTimeout()을 사용해 보았지만이 모든 것을 모을 전문 기술과 경험이 없다. 어떤 도움이라도 대단히 환영 할 것입니다.

감사합니다.

출처

2010-01-12 VanAsh

이 값은 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);

출처

2010-01-12 02:46:51 Sampson

DOM 조작이 비싸다. 당신이 그것을 피할 수 있다면 그것을하지 않으려 고 노력하십시오.

로드하는 링크가 정적 또는 동적입니까? 한번로드되면 다시로드해야합니까?

#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의 같은 CSS와

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

: 대답은 더 다음이 작업을 수행하지 않는 경우 그들을 통해 회전해야했습니다.

출처

2010-01-12 02:52:28 cletus

원하는대로 할 수 있습니다.

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>

출처

2010-01-12 02:52:40

내가 요구 사항을 가정 할 링크 된 페이지의 내용뿐만 아니라 링크 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>

출처

2010-01-12 02:53:29

링크 배열을 통해 반복하고 설정된 간격 후에 각각의 내용을 동적으로로드하십시오.

답변

관련 문제