2012-03-30 3 views
1

무한 루프에서 이미지가 스크롤되지 않는 자신의 홈페이지에 회전하는 창을 가진 친구를 도우려고합니다. 스크롤하여 시작 부분으로 롤백하고 다시 시작합니다. 여기이 '슬라이더'자바 스크립트로 이미지를 무한대로 회전시키는 방법은 무엇입니까?

은 자바 스크립트는 그가 제공 니펫 :

$(function() { 
    if ($('#customScroller').length != 0) { //check if we're on the right page 
     var width = $('#slider a').length; 
     $('#slider').width(width * 930); //give the slider the appropriate width 
     var count = 0; 
     initial slide position 

     function slide() { 
      if (count < (width - 1)) { //we want to check if at end of the slider 
       count++; 
      } 
      else { 
       count = 0; 
      } 
      var toMove = 0; 
      toMove = (-1 * (count * 930)); 
      $('#slider').animate({ 
       left: toMove 
      }, 1000, function() { 
       //complete 
      }); 
     } 
     var s = window.setInterval(slide, 8500); 
    } 
}); 

얼마나 많은 일이 그것을 무한히에 단순히주기를 변환하는 것입니다?

편집 : 당신은 다른이를 appraoch 할 것 http://www.ralphshardwood.com

+0

루프에 넣고이 끝나가 때 카운터를 재설정합니다. –

답변

2

: 여기 사이트입니다. 원하는 효과를 얻으려면 컨테이너의 오른쪽 모서리에서 슬라이드를 절대 배치하고 왼쪽에서 다음 슬라이드에 애니메이션을 적용하여 전체 목록을 이동하는 대신 Z- 인덱스가 높아야합니다. .. 주문

당신은 아래의 요점을 얻을 수 있으며, 기존의 마크 업에이 걸릴 수 있습니다 여기에 작업 jsFiddle입니다 : http://jsfiddle.net/rgthree/mGeqx/

if ($('#slides').length != 0) { 
    var currentIndex = 0, slides = $('#slides > li'); 
    $(slides[currentIndex]).css('left','0%'); 
    function slide() { 
     var current, next; 
     current = $(slides[currentIndex]); 
     currentIndex++; 
     if(currentIndex === slides.length){ 
      currentIndex = 0; 
     } 
     next = $(slides[currentIndex]); 
     next.css('left','100%'); 
     next.css('z-index',parseInt(current.css('z-index'), 10)+1); 
     next.animate({left: '0%'}, 1000); 
    } 
    var s = window.setInterval(slide, 2000); 
} 

마크 업 :

<ul id="slides"> 
    <li>Slide1</li> 
    <li>Slide2</li> 
    <li>Slide3</li> 
    <li>Slide4</li> 
    <li>Slide5</li> 
</ul>​ 

CSS :

,536
ul#slides {position:relative; width:400px; height:200px; overflow:hidden;} 
ul#slides > li { 
    position:absolute; 
    top:0px; 
    left:100%; 
    width:100%; 
    height:100%; 
    background:#777; 
    color:#FFF; 
    z-index:1; 
} 

ul#slides > li:nth-child(even) {background:#444;} 

+0

예를 들어 주셔서 감사합니다. :) –

관련 문제