이 예제는 참조를 위해 부트 스트랩에서 회전 목마 사용에 대한 포괄적 인 분석을 제공합니다. 특정 내용은 다음과 같습니다
소스 코드 파일 :
carousel.scss
carousel.js
구현 원칙 :
표시 할 모든 요소를 숨긴 다음 표시 할 현재 블록, 너비 및 높이를 적응할 수 있음을 지정하십시오.
소스 코드 분석 :
1. HTML 구조 : 주로 네 부분으로 나뉩니다
1.1. 컨테이너 : 가장 바깥 쪽 div에는 휠 재생 플러그인으로 지정 되려면 데이터-기준 = "회전 목마"가 필요하며 원 표시기의 연관성을 용이하게하기위한 ID를 제공합니다.
1.2. 그림 목록 부분은 외부 div로 싸인 다음 각 IMG는 div로 감싸고 클래스는 항목으로 포장됩니다.
1.3. 서클 표시기 : OL 목록을 사용하여 그래픽 목록 항목을 표시합니다. 각 목록 항목은 현재 원의 인덱스 번호를 표시하는 데 사용되는 Data-Slide-to =”Index”속성을 지정해야합니다.
1.4. 왼쪽 및 왼쪽 제어 버튼 : 왼쪽과 오른쪽으로 이동하는 기능을 실현합니다.
2. CSS 스타일
2.1. 회전 목마 : 상대 포지셔닝 마크는 하나뿐입니다
2.2. Carousel-Inner : 각 항목이 수정할 항목이있는 이미지 목록 영역을 회전시킵니다.
2.2.1. 활성, 다음 및 이전은 가시적 인 것으로 간주됩니다.
2.2.2. Carousel-Caption : 각 항목에 제목 정보가 있어야하고 기본 위치가 표시됨을 의미합니다.
2.3. Carousel-Control : 왼쪽 및 오른쪽 버튼의 스타일을 설정하여 기울기 및 투명성과 같은 정보를 설정합니다. Icon-Prev와 Icon-Next의 두 가지 추가 스타일을 제공합니다.
2.4. 회전식 인디케이터 : 원 부분 스타일은 절대적으로 배치되어 있습니다. 각 LI는 인라인 블록 요소로 설정됩니다. 글꼴을 숨기려면 텍스트 안정 : -999를 사용하십시오.
3. JS 코드
3.1. 주요 핵심 방법은 슬라이드이며 사진 전환을 실현합니다.
3.1.1. 이미지 스위치가 처음 수행되면 일시 정지 방법이 호출되어 잠정적으로 타이머를 설정합니다. 이미지 스위치가 완료된 후에 만 타이머를 활성화하기 위해 사이클 메소드가 호출됩니다.
3.1.2. 유형과 다음 두 매개 변수가 허용됩니다
3.1.2.1. 유형 : 페이지를 위 또는 아래로 변경하는 수단
3.1.2.2. 다음 : 이번에는 활성 항목으로 표시됩니다. 전달되지 않은 경우 getItemfordirection 방법을 사용하여 얻어야합니다.
3.1.3. $ active (현재 활성 항목), $ NEXT (활성 항목이어야하는 항목), ISCYCLING (타이머 회전 목마의 타이머 핸들), 방향 (방향) 및 기타 기본 매개 변수와 같은 기본 매개 변수를 가져옵니다.
3.1.4, Slide.bs.carousel 이벤트를 트리거합니다
3.1.5. 그런 다음 표시기의 색인 항목을 설정하십시오
3.1.6. 사진 전환. CSS 애니메이션을 지원하는 경우 애니메이션을 사용하여 전환하십시오. 그렇지 않으면 CSS를 직접 추가하여 스위치를 직접 추가하십시오.
3.1.7. 애니메이션 전환 원리 :
3.1.7.1. 이전 : 사진을 오른쪽으로 스크롤하여 결합하는 스타일입니다 : Active Right (Active Item) Prev 오른쪽 (다음 항목). 현재 이전 자체는 -100%이며 사진을 가장 왼쪽에 넣습니다.
3.1.7.2. 다음 : 이미지를 왼쪽으로 스크롤하고 다음 왼쪽 (다음 항목). 이 시점에서 다음 자체는 100%이며 이미지를 가장 오른쪽에 올려 놓으십시오.
3.1.7.3. Active Right : 그림이 오른쪽에 있어야하므로 그림 너비의 100%를 이동해야합니다.
3.1.7.4. 활성 왼쪽 : 이미지가 왼쪽에 있고 이미지 너비는 -100%로 실행해야합니다.
3.1.7.5. 비교 사진 :
3.1.8. 구현 코드 (CSS3 제외) :
.carousel-inner> .Active, .carousel-inner> .Next, .carousel-inner> .prev {display : block;}. carousel-inner> .Active {left : 0;}. carousel-inner> .next, .carousel-inner> .prev {position : Absolute; 상단 : 0; 너비 : 100%;}. carousel-inner> .next {왼쪽 : 100%;}. carousel-inner> .prev {left : -100%;}. carousel-inner> .next.left, .carousel-inner> .prev.right {왼쪽 : 0;}. carousel-inner.left {left : -100%;}. .active.right {왼쪽 : 100%;}여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
멋진 주제 공유 : jQuery 사진 회전 목마 JavaScript 사진 회전 목마 부트 스트랩 사진 회전 목마
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람들이 JavaScript 프로그래밍을 배우는 것이 도움이되기를 바랍니다.