특정 div를 통한 반복

Question

div를 통과하고 일부 div의 이미지와 설명 텍스트를 표시하는 무한 루프를 만들려고합니다. 기본적으로 갤러리입니다.

<div class="gallery"> 
    <div class="header">gallery</div> 
    <div class="gimages"></div> 
    <div class="ggallery"> 
     <div class="gitem" id="0"><div class="imgtext"><div>text</div></div><img src="images/gallery/1.jpg" border="0" /></div> 
     <div class="gitem" id="1"><div class="imgtext"><div>text</div></div><img src="images/gallery/2.jpg" border="0" /></div> 
     <div class="gitem" id="2"><div class="imgtext"><div>text</div></div><img src="images/gallery/3.jpg" border="0" /></div> 
     <div class="gitem" id="3"><div class="imgtext"><div>text</div></div><img src="images/gallery/4.jpg" border="0" /></div> 
     <div class="gitem" id="4"><div class="imgtext"><div>text</div></div><img src="images/gallery/5.jpg" border="0" /></div> 
     <div class="gitem" id="5"><div class="imgtext"><div>text</div></div><img src="images/gallery/6.jpg" border="0" /></div> 
     <div class="gitem" id="6"><div class="imgtext"><div>text</div></div><img src="images/gallery/7.jpg" border="0" /></div> 
     <div class="gitem" id="7"><div class="imgtext"><div>text</div></div><img src="images/gallery/8.jpg" border="0" /></div> 
     <div class="gitem" id="8"><div class="imgtext"><div>text</div></div><img src="images/gallery/9.jpg" border="0" /></div> 
     <div class="gitem" id="9"><div class="imgtext"><div>text</div></div><img src="images/gallery/10.jpg" border="0" /></div> 
     <div class="gitem" id="10"><div class="imgtext"><div>text</div></div><img src="images/gallery/11.jpg" border="0" /></div> 
     <div class="gitem" id="11"><div class="imgtext"><div>text</div></div><img src="images/gallery/12.jpg" border="0" /></div> 
    </div> 
</div> 

div ggallery는 display : none이며 여기에서 div gimages에 데이터를 가져옵니다. 문제는 모든 반복 작업 사이에 경고를 두지 않으면 마지막 이미지 만 표시된다는 것입니다. 스크립트는 다음과 같습니다.

$(document).ready(function(){ 
    var refreshId = setInterval(function(){ 
     $('.gallery .ggallery .gitem').each(function(index){ 
      $('.gallery .gimages').html($(this).html()); 
      if(index==11){ 
       index = 0; 
      } 
     }); 
    }, 5000); 
}); 

내가 뭘 잘못하고 있니?

Answer 1

이 정상적으로를 다음 항목으로 가서 기다리지 않고 끝까지 있어요

$(document).ready(function(){ 
    var list = $('.gallery .ggallery .gitem'); 
    var j = 0; 
    var f = function() { 
     $('.gallery .gimages').html($(list[j%list.length]).html()); 
     j++; 
    };   
    setInterval(f, 2000); 
});​ 

전체 바이올린을 참조하십시오 : 트릭을 할 http://jsfiddle.net/kokoklems/nQGw9/

내가 단순히을의 내용을 변경하는 함수를 정의하는 중이 야div를 호출 한 다음 setInterval 함수를 사용하여 2 초마다 호출합니다. 처음으로 돌아 가려는 속임수는 list[j%list.length]입니다.

Answer 2

루프의 내부에 타이머를 이동

- 당신은 5 초마다 루프를 실행하고 오히려 (테스트하지) 오초

$(document).ready(function(){ 
    $('.gallery .ggallery .gitem').each(function(index){ 
     var refreshId = setInterval(function(){ 
      $('.gallery .gimages').html($(this).html()); 
      if(index==11){ 
       index = 0; 
      } 
     }, 5000); 
    }); 
}); 

Answer 3

귀하의 HTML 당 다음과 같은 코드가 있습니다. 간격도 변경할 수 있습니다.

function init(){ 
     var itemInterval = 1000; 
     var numberOfItems = $('.gitem').length; 
     var currentItem = 0; 
     setInterval(function() { 
      $(".gimages").html($('#' + currentItem).clone()); 
      if (currentItem == numberOfItems - 1) { 
       currentItem = 0; 
      } else { 
       currentItem++; 
      } 

     }, itemInterval); 
    }; 

    $(function() { 
     init(); 
    });