부트 스트랩 사진 회전 목마 효과를 살펴 보겠습니다.
위의 것은 모든 사람이 공유 한 효과이지만 Netease Cloud Music의 홈페이지입니다.
iOS7의 공식 제어 라이브러리에 먼저 등장해야하며 Android는이보기를 특정 버전에 추가했습니다. 디자인은 보편적입니다. Bootstrap3는 또한 웹에서 이러한 효과의 사용을 지원합니다.
다음으로 간단한 분석 :
1. 구조 분석
회전 목마 사진에는 주로 세 부분이 포함됩니다.
☑ 회전 목마 사진
☑ 회전 목마 사진에 대한 카운터
☑ 회전 목마 사진 용 컨트롤러
1 단계 : 회전 목마 그림 용 컨테이너를 설계하십시오. 회전식 스타일은 부트 스트랩 프레임 워크에 채택 되며이 컨테이너에 대한 ID 값이 정의되므로 데이터 속성이 나중에 트리거를 선언하는 데 사용됩니다.
다음과 같이 코드를 복사하십시오. <div id = "SlidersHow"> </div>
2 단계 : 회전 목마 그림 카운터를 설계하십시오. 컨테이너 Div.carousel 내부에 회전 목마 그림 계산기를 추가하여 회전식 표시기 스타일을 사용합니다. 주요 기능은 현재 그림의 재생 순서를 표시하는 것입니다 (여러 그림이 있으며 다음은 일반적으로 동일한 목록이 사용됩니다.
<div id = "SlidersHow"> <!-그림 회전 목마 순서를 설정-> <ol> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> </ol> </div>
3 단계 : 회전식 사진 재생 영역을 설계하십시오. 회전식 이미지의 전체 효과에서 재생 영역은 가장 중요한 영역으로, 주로 회전 목마를 깎아야하는 그림을 배치하는 데 사용됩니다. 이 영역은 회전 목마 내너 스타일을 사용하여 제어되며 회전식 컨테이너에도 배치되며 각 회전식 이미지는 항목 컨테이너를 통해 배치됩니다.
<div id = "slidershow"> <!-이미지 회전 목마 순서를 설정-> <ol> <li> 1 </li>… </ol> <!-회전 목마 그림을 설정합니다-> <div> <a href = "##"> <img src = "http://images3.c-ctrip.com/rk/201407/ll580x145. </div> <div> <a href = "##"> <img src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"</a> </div>… <div> <a href = "#"> src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> </a> </div>… <div> <a href = "##"> <img src = "http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg"> </a> </div> </div> </div
4 단계 : 회전식 사진 설명을 설정합니다. 많은 회전 목마 사진 효과에는 각 그림에 자체 제목 및 설명 내용이 있습니다. 실제로 부트 스트랩 프레임 워크의 회전 목마도 비슷한 효과를 제공합니다. 항목의 이미지 하단에 해당 코드를 추가하십시오.
<div id = "slidershow"> <!-그림 회전 목마 순서를 설정-> <ol> <li> 1 </li>… </ol> <!-회전 목마 그림을 설정합니다-> <div> <a href = "##"> <img src = "http://images3.c-ctrip.com/rk/201407/l580x145. 해당 제목 및 설명 내용-> <div> <h3> 이미지 제목 </h3> <p> 설명 내용 ... </p> </div> </div>… </div> </div>
5 단계 : 회전식 사진 컨트롤러를 설계하십시오. 여러 번 회전 목마 사진에는 앞뒤로 재생되는 컨트롤러도 있습니다. 회전 목마에서는 왼쪽과 오른쪽과 회전식 통제 스타일을 결합하여 달성됩니다. 왼쪽이 앞으로의 재생을 의미하는 경우, 오른쪽은 뒤로 재생을 의미합니다. 회전 목마 컨테이너에도 배치됩니다.
<div id = "slidershow"> <!-그림 회전 목마 순서를 설정-> <ol>… </ol> <!-회전 목마 그림을 설정-> <div>… </div> <!-회전 목마 그림 컨트롤러를 설정합니다-> <a href = "" "> <span> </span> </a> <a href =" "> </span> </a>
2. 구현 프로세스
<div id = "carousel-example-generic"data-ride = "carousel"> <!-표시기-> <ol> <li data-target = "#carousel-example-generic"data-slide-to = "0"> </li> <li data-target = "#carousel-example-generic"data-slide to = "1"> <li> data-target = "#carousel-example-generic"data-slide-to = "2"> </li> </ol> <!-슬라이드 용 래퍼-> <div role = "listbox"> <div> <img src = "..."> <div> ... </div> </div> </div> ... "> ..."/div> ... "/div> ... <!-> <a href = "#carousel-example-generic"robile = "button"data-slide = "prev"> <span> </span> <span> previous </span> </a> <a href = "#carousel-example-generic"robile = "data-slide ="next ">
세 부분으로 나뉩니다
1. 표시기
한 부분은 아래의 작은 점입니다 ... 표시기입니다
OL 클래스는이 표시기를 만드는 데 사용됩니다
각 Data-Slide-to = "0"속성은 기본 활성화 상태를 정의하기 위해 위치를 안내하는 데 사용됩니다.
목
<div> <img src = "..."> <div> <h3> ... </h3> <p> ... </p> </div> </div>
서스펜스가없고 사진 의 제목 과 내용을 작성하십시오.
2. 왼쪽 및 왼쪽 컨트롤러
코드는 다음과 같습니다
<a href = "#mycarousel"robile = "button"data-slide = "prev"> <span aria-hidden = "true"> </span> <span> previous </span> </a> <a href = "#mycarousel"role = "button"data-slide = "next"> <true "> <next> <next> <next>
JavaScript에서 작동
초기화
$ ( '. carousel'). Carousel ({interval : 2000})루프를 수행하십시오
.carousel ( '사이클')
정지시키다
.carousel ( 'pause')
특정 항목에 대한 위치는 0부터 시작됩니다
.carousel (번호)
이전 것
.carousel ( 'prev')
다음
.carousel ( 'Next')
부트 스트랩에 대한 더 많은 내용은 특별 주제에서도 찾을 수 있습니다 : "Bootstrap Learning Tutorial"
위의 것은 JavaScript 사진 회전 목마에 대한 자세한 소개입니다. 이 기사가 JavaScript 프로그래밍을 배우는 모든 사람들에게 도움이되기를 바랍니다.