뿐만 아니라 Mootools에 대한 여러 밖에 Carousels, 다양한으로 난 여전히 좋은 이유로 내 자신의 회전 목마 클래스를 작성하기로 결정
1. 페이징 기능 (회전 목마에서 특정 슬라이드 / 단계를 점프하는 법) 구함.
2. 왼쪽 및 오른쪽 버튼 / 링크의 배치와 자유는 어디까지 내주십시오 싶었어요.
3. 슬라이드 스텝을보다 효율적으로 관리할 수 있습니다.
나는 위의 기능, 새로운 회전 목마를 만들 한거 ... 아래로 ... 필요한 것입니다! 수정을 제안 부담없이!
내 예제는이 ... [모양 보기 데모 ]
데모보기 | 페이징 버전 1.0으로 다운로드 Mootools 회전 목마를 (1991 회 다운로드)
1. 회전 목마다 페이징
당신은 쉽게 간단하게 true로 MooCarousel의 인스턴스를 만드는 동안 전달된 마지막 parater이다 페이징 플래그 (원하는 페이징) 또는 false를 (donot가 페이징을 원하는) 설정하여 여러분의 회전 목마에 페이징을 추가할 수 있습니다.
VAR carousel1 = 새로운 MooCarousel ( 'carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss 사실); / / NS 슬라이드 = 수, SSS는 = 슬라이드 스텝 크기
그리고 당연히 당신은 그들의 CSS를 수정하여 원하는대로 이러한 페이징 achors의 모양-N-느낌을 변경할 수 있습니다.
. carousel_paging {텍스트 정렬 : 오른쪽, 여백 : 5px 10px 0 0;}
. carousel_paging 전류, carousel_paging 페이지 {개요 : 없음; 폭 :... 15px; 높이 : 15px; 라인 높이 : 15px; 텍스트 정렬 : 센터; 디스플레이 : 블록; 플로트 : 왼쪽; 배경 : # D8D8EB는; 여백 : 0 1px 0 0; 텍스트 장식 : 없음;}
. carousel_paging : 가져가, carousel_paging 현재 {배경 : # 4D4D9B; 색깔 : # FFFFFF;}..
글쎄! 작은 문제에도 불구하고있다, 페이징 앵커가 세트면 그것은 회전 목마 컴포넌트 후 항상 생성된다. 난 그게 역동뿐만 아니라 확인하고 싶었어하지만 그때 막 비율 나가 불고위한 Script를 유지하기 위해, 내가 건너하기로 결정했습니다.
하지만 넌 어린 자바 스크립트를 알고, 당신은 쉽게 당신의 요구를 만족시킬려고 MooCarousel 클래스에서 페이징 생성 코드를 수정할 수 있습니다.
2. 왼쪽 및 오른쪽 아이콘 Customising
당신은 간단하게 CSS로 장난치는에 의해 배치, 이미지나 왼쪽과 오른쪽 버튼의 displat 속성을 변경할 수 있습니다. 왼쪽 및 오른쪽 buttoms의 게재 위치를 변경할 수 있도록하는 것은 바로 내의 회전 목마 클래스에 나를 위해 실제 이유였다.
이 MooCarousel 클래스는 ID가이 버튼 밖으로 받아들이고 있기 때문에, 당신은 실제로 당신이 괜찮다면, 페이지의 아무 곳이나이 버튼을 배치할 수있는 ... 그런 요소 계층 구조에 있어야 할 필요는 없습니다, 나의 예제와 같이.
VAR carousel1 = 새로운 MooCarousel ( 'carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss 사실);
CSS
.. carousel_container_l, carousel_container_r {여백 : 50 픽셀 0 0 0; 위치 : 상대적; 폭 : 23px; 높이 : 20px; 플로트 : 왼쪽; 커서 : 포인터;}
. carousel_container_r {배경 위치 : 0-38px;}
. carousel_container_l {배경 위치 : 0-58px;}
3. 슬라이드 단계 Customising
난 내 CUSTOMISING 슬라이드 단계를 무슨 말씀이세요?
대부분 Carousels이 보이는 창으로 가득 밀어. 네 가지 항목을 (위의 예제에서와 같은) 가지고 그렇게 말하고, 모두 네 개의 항목을 밀어 것입니다. 이 회전 목마 구성 요소와 함께, 당신은 슬라이드의 숫자와 선택 단계의 크기를 전달합니다.
VAR carousel1 = 새로운 MooCarousel ( 'carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss 사실);
c_ns 슬라이드 = 수, c_sss = 슬라이드 스텝 크기
또한, 내 example1에 나는 어디 로직을 기반으로 슬라이드 스텝 크기를 calcuted있다, 나는 품목의 수, 각 항목에 너비와 CSS의 각 항목 이후에 제공했다고 여백을 알아요.
카로틴 1 / * * /
VAR c1_w = 92; / / 카로틴 항목 폭
VAR c1_n = 10; 비교의 카로틴 항목의 / / 총 개수
VAR c1_pp 비교의 카로틴의 제품 perpage의 = 4 / / 번호
VAR c1_marginFactor = 51;
VAR c1_sss = c1_w * c1_pp; / / SSS = 슬라이드 스텝 크기
VAR c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0.5) / / NS의 = 숫자 슬라이드
c1_sss + = c1_marginFactor; 마진에 대한 / / SSS = 슬라이드 스텝 크기, 51
요구 사항 : Mootools 1.2
데모보기 | 페이징 버전 1.0으로 다운로드 Mootools 회전 목마를 (1991 회 다운로드)
