모두를위한 간단한 회전 목마 차트에서 먼저 효과를 볼 수 :
1, 분석 회전 목마 그림 원칙 : 1) 원칙 다섯 회전 목마 그림 6은 회전 목마, 제 1 및 제 마지막 쉬운 통합과 같은 이미지의 사용은 사용자에게 더 나은 경험 효과를주는 것입니다
2)하면 화상이 올바른 위치에 컨베이어 픽처가 왼쪽으로 이동할 때 오른쪽으로, 동일한 방식으로 이동 리볼버에 방송 영상
3) 우리는 신속하게 첫번째로 전환해야 마지막에 회전 목마 때 
2, 구현 과정 : 클릭 이벤트가 자동으로 이벤트를 회전, 인덱스 표시를 전환
시각적 표시 영역을 포함하여 이벤트에 클릭 버튼을 클릭하고 명확한 자동 회전 목마 타이머 버튼은보기 영역의 제거 후 사라지고, 자동으로 회전, 왼쪽 버튼 클릭 이벤트를 클릭하고 아래의 작은 점을 클릭 이미지 전환 이벤트.
자동 회전 목마 이벤트가 자동적으로 클릭 가능한 이미지없이 재생, 오른쪽에 기본 회전 목마, 이동 기능을 사용하여 타이머 재생을 설정합니다.
이벤트가 인덱스 표시 쇼를 변경하는 경우 현재 사진은 현재의 인덱스 포인트를 보여줍니다, 그리고 빨간색으로 변합니다
3 달성
1, HTML 및 CSS 스타일 간단한 포인트
다음과 같이 HTML 본문에서이다 :
<DIV 클래스 = "래퍼">
<UL 등급 = "imgs">
<LI> <IMG SRC = "./ IMG / 1.JPG"ALT = ""> </ 리>
<LI> <IMG SRC = "./ IMG / 2.JPG"ALT = ""> </ 리>
<LI> <IMG SRC = "./ IMG / 3.JPG"ALT = ""> </ 리>
<LI> <IMG SRC = "./ IMG / 4.jpg"ALT = ""> </ 리>
<LI> <IMG SRC = "./ IMG / 5.jpg"ALT = ""> </ 리>
<LI> <IMG SRC = "./ IMG / 1.JPG"ALT = ""> </ 리>
</ UL>
<div 클래스 = "leftBtn BTN"> 및 LT </ div>
<div 클래스 = "rightBtn BTN">한다 </ div>
<UL 등급 = "점">
<LI> 0 </ 리>
<LI> 1 </ 리>
<LI> 2 </ 리>
<LI> 3 </ 리>
<LI> 4 </ 리>
</ UL>
</ DIV>
<스크립트 SRC = "./ JS / JQuery와-3.3.1.js"> </ script>
<스크립트 SRC = "./ JS / demo.js"> </ script>
CSS 스타일 :
* {
여백 : 0 픽셀;
패딩 : 0 픽셀;
목록 스타일 : 없음;
}
.싸개{
위치 : 상대;
폭 : 400 픽셀;
높이 : 350px;
국경 : 1 픽셀의 고체 #eee;
마진 : 100 픽셀 자동;
오버 플로우 : 숨겨진; 그게 눈에 보이지 않는 것보기 영역에서, .imgs의 위치이기 때문에 //이의 숨겨진 설정
}
.wrapper .imgs {
위치 : 절대;
왼쪽 : 0 픽셀;
폭 : 2400px;
높이 : 350px;
폰트 크기 : 0 픽셀;
}
.wrapper .imgs 리 {
표시 : 인라인 블록, 블록 요소 간의 / * 로우 레벨이 탭을 압입 폰트 크기 값의 크기 / *이고
폭 : 400 픽셀;
높이 : 350px;
}
.wrapper .imgs 리 IMG {
폭 : 100 %;
신장 : 100 %;
}
.btn {
폭 : 40px;
높이 : 30 픽셀;
위치 : 절대;
위 : 50 %;
여백 - 가기 : -15px;
배경 : 노란색;
불투명 : 0.4;
텍스트 정렬 : 센터;
라인 높이 : 30 픽셀;
표시 : 없음; // 없음으로 초기화, 편의 호버 이벤트는 기능 초기 화면을 보여줍니다.
}
.leftBtn {
왼쪽 : 0 픽셀;
}
.rightBtn {
오른쪽 : 0 픽셀;
}
/ * {.wrapper .rings
폭 : 100 %;
위치 : 절대;
바닥 : 30 픽셀;
텍스트 정렬 : 센터;
} * /
.wrapper .DOT {
위치 : 절대;
바닥 : 30 픽셀;
좌측 : 50 %;
마진 왼쪽 : -65px;
폭 : 130 x 96 픽셀;
높이 : 20 픽셀;
텍스트 정렬 : 센터;
}
.DOT 리 .wrapper {
왼쪽으로 뜨다;
폭 : 20 픽셀;
높이 : 20 픽셀;
경계 반경 : 50 %;
배경 : #fff;
글꼴 크기 : 0 픽셀은; // 텍스트 리를 사라
마진 왼쪽 : 4 픽셀;
}
jQuery를 구현 :
// 이전과 사진 후 이동 회전 목마 전후에 클릭 이벤트를 클릭합니다
// 자동으로 이벤트에는 자동으로 회전 이미지에 이벤트를 클릭 이동하지
// 이벤트의 인덱스 값을 변경
nowIndex = 0이었다;
시간 = NULL이었다
- 1. NUM = $ 길이 ( '. 리 imgs')
LEN = $ ( '. imgs 리'). 폭 ()
잠금 사실 =;
// CONSOLE.LOG (NUM, S);
엔트리 기능과 같은 기능을 초기화 () {// 초기화 () 초기화 함수
이벤트 볼륨 ();
액세스 ();
changeIndex ();
}
초기화 ();
기능 이벤트 볼륨 () {
$ ( '. 래퍼'). 호버 (함수 () {// 마우스 이벤트를 이동
$ ( '. BTN') (보여).;
됨 clearInterval (타이머);
}, 함수() {
$ ( '. BTN') 숨기기 ().;
액세스 ();
})
$ ( '. 래퍼').에 ( '클릭' '. щࣉ ='을, 기능 () {// 버튼 클릭 이벤트에 대한
경우 ($ (이) .hasClass ( 'leftBtn')) {
( '이전')를 이동;
} 다른 경우 ($ (이) .hasClass ( 'rightBtn')) {
( '다음')으로 이동;
}
})
$ ( '. 점').에 ((,, 기능을 '리'를 '클릭') 클릭 이벤트의 {// 인덱스 값
VAR 지수 = $ (이)있는 .index ();
//을 console.log (인덱스)
(인덱스)를 이동;
})
}
이동 기능 (DIR) {
(잠금) {// 자동으로 회전 충돌을 방지하고 이벤트가 발생 클릭하여 잠금을 설정, 화상 표시 위치가 변경되는 경우
잠금 장치는 거짓 =;
경우 (DIR == '이전') {
경우 (nowIndex == 0) {
nowIndex = A;
$ ( 'Imgs.')의 CSS ( '왼쪽', -nowIndex * LEN); // 원단에 그림이 왼쪽 -nowIndex에서 영상 위치 위로 * LEN
}
nowIndex -;
$은 ( '. Imgs')이 애니메이션 ({ '왼쪽'LEN -nowIndex *}. 1000, 함수 () {// 애니메이션 변이체 세트
changeIndex ();
잠금 사실 =;
});
} 다른 경우 (DIR == '다음') {
경우 (nowIndex == NUM) {
nowIndex = 0;
$ ( 'Imgs.')의 CSS ( '왼쪽', -nowIndex * LEN); // 동일한 오른쪽
}
nowIndex ++;
. $ ( '. imgs') 애니메이션 ({ '왼쪽'LEN} -nowIndex * 1000, 함수 () {
changeIndex ();
잠금 사실 =;
});
}그밖에{
nowIndex = DIR;
. $ ( '. imgs') 애니메이션 ({ '왼쪽'* -nowIndex 렌} (400), 함수 () {
changeIndex ();
잠금 사실 =;
});
}
}
}
changeIndex 함수 () {
$ ( '리 도트.') CSS를 ( '배경', '#의 FFF.');
(nowIndex == NUM) {// 인덱스 값 경우 0--4
$ ( '리 도트.') EQ (0) .CSS ( '배경', '#의 F40.');
}그밖에{
$ ( '리 도트.') EQ (nowIndex) .CSS ( '배경', '#의 F40을.');
}
}
autoMove 함수 () {
경우 (잠금) {
됨 clearInterval (타이머);
타이머하여 setInterval = (함수 () {
( '다음')으로 이동;
}, 2000);
}
}
작은 수치는 컨베이어의 효과를 나타낸다 :
나는 우리가 회전 목마지도를 이기기 위해, 아래에 마무리의 좋은 아이디어를 바랍니다.
