2011-09-08 6 views
0

div의 가로 방향으로 이미지 목록을 스크롤하고 패턴 반복을 찾는 간단한 방법을 찾고 있습니다. 이미지의 무한 루프가 왼쪽에서 오른쪽으로 천천히 움직입니다.이미지 div 스크롤

현재이 작업에는 http://logicbox.net/jquery/simplyscroll/을 사용하고 있지만 필요하지 않은 기능이 많이 있습니다 (예 : 사용자 컨트롤 및 세로 스크롤). 제 희망은 jQuery에서 이것을 수십 줄로 코딩하는 간단한 방법이 있다는 것입니다.

나는 이미지를 수평으로 스크롤 할 수있는 빌드를 할 수 있다고 확신하지만 루프를 생성하는 것은 저를 넘어선 것입니다.

도움말, 정보 또는 새 스크립트 (최근에 업데이트 됨)도 훌륭합니다. 감사!

답변

4

animate() 및 해당 콜백을 사용하여 루프를 만드는 방법에 대한 매우 간단한 예제입니다. 첫 번째 항목 만 애니메이션 처리 한 다음 마지막 자식 이후 노드를 이동합니다. 따라서 매번 첫 번째 요소에 애니메이션을 적용 할 수 있습니다.

코드 :http://jsfiddle.net/54fUH/
데모 :http://jsfiddle.net/54fUH/show

(function animate() { 
    $("#slides li:first").each(function(){ 
     $(this).animate({marginLeft:-$(this).outerWidth(true)},3000,function(){ 
      $(this).insertAfter("#slides li:last"); 
      $(this).css({marginLeft:0}); 
      setTimeout(function(){animate()},2000); 
     }); 
    }); 
})(); 
+0

최고 기술! – LobsterMan