2012-05-02 2 views
2

div 컨테이너를 창으로 사용하여 jquery를 사용하여 수평 li 항목의 목록을 슬라이드 안팎으로 슬라이드합니다. http://jsfiddle.net/TX5fJ/5/jquery를 사용하여 div의 항목을 동적으로 그리고 동적으로 슬라이드하는 방법

그것은 8 개 항목의 목록을 초기화하고 당신이 그들을 좌우 사업부 창에서 스크롤 할 수 있습니다 :

이것은 내가 지금까지있는 것입니다. 또한 목록의 끝에 항목을 추가하고 목록의 시작 부분에서 항목을 제거하는 기능이 있습니다. 내가 뭘하려고 오전

: 보이지 않는

1) 목록의 끝에 항목을 추가 (항목)

2)에 대한 목록을 스크롤 항목이 단지 눈에 보이는 추가하기 위해 왼쪽 더 이상 필요없는 목록()

문제는 첫 번째 항목을 제거하면 왼쪽으로 이동하는 전체 목록을 유발한다는 것입니다의 머리에서 항목을 제거)

3 (첫 번째 항목은보기에서 이동).

첫 번째 항목을 제거하지 않으면 작동하는 것 같습니다. (내 테스트 기능 참조)

저의 솔루션에 대한 우려는 ul이 모든 잠재적 항목을 담을만큼 충분히 넓어야한다는 것입니다. 고정 너비를주지 않으면 작동하지 않습니다.

그래서 저는 99999px로 만들 수 있으며 테스트 버튼에 현재 방법을 사용합니다.

누구나 더 나은 구현에 대한 아이디어가 있습니까?

감사합니다. 당신이 머리에서 목록 항목을 삭제 한 후

답변

3

당신은 단순히 목록의 여백 왼쪽 속성을 다시 수 :

function RemoveItem() { 
    $('#slider-items li').first().remove(); 
    $('#slider-items').css('marginLeft', 0); 
} 

fiddle 업데이트되었습니다.

+0

감사합니다. 애니메이션을 완료 한 후 완벽하게 작동합니다. –

관련 문제