부트스트랩 이미지 캐러셀 효과_자바스크립트 기술 종합 분석
- WBOY원래의
- 2016-05-16 15:27:571338검색
1. 구조 분석
캐러셀 이미지는 주로 세 부분으로 구성됩니다.
√ 사진 회전목마
√ 회전목마 사진 카운터
√ 캐러셀 사진용 컨트롤러
1단계: 캐러셀 이미지용 컨테이너를 디자인합니다. Bootstrap 프레임워크에서 캐러셀 스타일을 사용하고 이 컨테이너에 대한 ID 값을 정의하면 나중에 트리거를 선언하는 데 데이터 속성을 사용할 수 있습니다.
2단계: 캐러셀 이미지 카운터를 디자인합니다. carousel-indicators 스타일을 사용하여 컨테이너 div.carousel 내에 회전식 그림 계산기를 추가합니다. 주요 기능은 현재 그림의 재생 순서를 표시하는 것입니다(그림이 여러 개인 경우 여러 개의 li을 배치). 순차 목록:
<div id="slidershow" class="carousel"> <!-- 设置图片轮播的顺序 --> <ol class="carousel-indicators"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li></ol> </div>
3단계: 캐러셀 이미지 재생 영역을 디자인합니다. 캐러셀 이미지의 전체 효과에서 재생 영역은 가장 중요한 영역입니다. 이 영역은 주로 회전해야 하는 이미지를 배치하는 데 사용됩니다. 이 영역은 캐러셀 내부 스타일을 사용하여 제어되며 캐러셀 컨테이너 내에 배치되며 각 캐러셀 이미지는 항목 컨테이너를 통해 배치됩니다.
<div id="slidershow" class="carousel"> <!-- 设置图片轮播的顺序 --> <ol class="carousel-indicators"> <li class="active">1</li> … </ol> <!-- 设置轮播图片 --> <div class="carousel-inner"> <div class="item active"> <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a> </div> <div class="item"> <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt=""></a> </div> … <div class="item"> <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg" alt=""></a> </div> </div> </div>
4단계: 회전식 이미지 설명 설정 많은 회전식 이미지 효과에는 각 이미지에 대한 자체 제목과 설명도 있습니다. 실제로 Bootstrap 프레임워크의 Carousel도 비슷한 효과를 제공합니다. 아이템 이미지 하단에 해당 코드를 추가하시면 됩니다.
<div id="slidershow" class="carousel"> <!-- 设置图片轮播的顺序 --> <ol class="carousel-indicators"> <li class="active">1</li> … </ol> <!-- 设置轮播图片 --> <div class="carousel-inner"> <div class="item active"> <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a> <!-- 图片对应标题和描述内容 --> <div class="carousel-caption"> <h3>图片标题</h3> <p>描述内容...</p> </div> </div> … </div> </div>
5단계: 캐러셀 이미지 컨트롤러를 디자인합니다. 캐러셀에는 정방향 및 역방향 컨트롤러도 있는 경우가 많습니다. 이는 왼쪽과 오른쪽이 결합된 캐러셀 제어 스타일을 통해 캐러셀에서 달성됩니다. 그 중 왼쪽은 앞으로 재생을 의미하고 오른쪽은 뒤로 재생을 의미합니다. 캐러셀 컨테이너에도 배치됩니다.
<div id="slidershow" class="carousel"> <!-- 设置图片轮播的顺序 --> <ol class="carousel-indicators"> … </ol> <!-- 设置轮播图片 --> <div class="carousel-inner"> … </div> <!-- 设置轮播图片控制器 --> <a class="left carousel-control" href="" > <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href=""> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
2. 선언적 터치 캐러셀 이미지 재생(JS 필요 없음)
<div id="slidershow" class="carousel slide" data-ride="carousel"> <!-- 设置图片轮播的顺序 --> <ol class="carousel-indicators"> <li class="active" data-target="#slidershow" data-slide-to="0"></li> <li data-target="#slidershow" data-slide-to="1"></li> <li data-target="#slidershow" data-slide-to="2"></li> </ol> <!-- 设置轮播图片 --> <div class="carousel-inner"> <div class="item active"> <a href="##"><img style="height: 300px;width: 800px"></a> <div class="carousel-caption"> <h3>图片标题1</h3> <p>描述内容1...</p> </div> </div> <div class="item"> <a href="##"><img style="height: 300px;width: 800px"></a> <div class="carousel-caption"> <h3>图片标题2</h3> <p>描述内容2...</p> </div> </div> <div class="item"> <a href="##"><img style="height: 300px;width: 800px"></a> <div class="carousel-caption"> <h3>图片标题3</h3> <p>描述内容3...</p> </div> </div> </div> <!-- 设置轮播图片控制器 --> <a class="left carousel-control" href="#slidershow" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#slidershow" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
선언적 접근 방식은 캐러셀의 위치를 쉽게 제어할 수 있는 데이터 속성을 정의하여 달성됩니다. 주로 다음 유형이 포함됩니다.
1. 데이터 라이드 속성: 캐러셀 값을 가져와 캐러셀에 정의합니다.
2. Data-target 속성: 값은 carousel에서 정의한 ID 이름 또는 기타 스타일 식별자이며, 값은 "#slidershow"이며, carousel 카운터의 각 li에 정의됩니다.
3. data-slide 속성: 값에는 prev, next가 포함되며 prev는 뒤로 스크롤을 의미하고 next는 앞으로 스크롤을 의미합니다. 이 속성 값은 캐러셀 컨트롤러의 a 링크에도 정의되며 컨트롤러의 href 값은 컨테이너로 설정됩니다. 4. 캐러셀의 ID 이름 또는 기타 스타일 식별자입니다.
4. data-slide-to 속성: 특정 프레임의 아래 첨자를 전달하는 데 사용됩니다(예: data-slide-to="2"). 이는 지정된 프레임으로 직접 이동할 수 있습니다(아래 첨자는 0부터 시작). 동일한 정의 회전목마 카운터의 각 리에.
여기서 주의할 점은 #slidershow 레이어에 슬라이드 스타일을 추가할 수 있으며, 사진 및 사진 전환 효과를 사용하여 부드러운 느낌을 줄 수 있다는 점입니다.
<div id="slidershow" class="carousel slide" data-ride="carousel"> ... </div>
data-ride="carousel", data-slide 및 data-slide-to 외에도 캐러셀 구성요소는 세 가지 다른 맞춤 속성도 지원합니다.
다음 코드는 "연속 루프가 없는 캐러셀"과 "캐러셀 시간 간격은 1초"를 구현합니다.
<div id="slidershow" class="carousel" data-ride="carousel" data-wrap="false" data-interval="1000"> ...... </div>
3. JavaScript 트리거 메소드 이미지 캐러셀
HTML:
<div id="slidershow" class="carousel slide"> <!-- 设置图片轮播的顺序 --> <ol class="carousel-indicators"> <li class="active" data-target="#slidershow" data-slide-to="0">1</li> <li data-target="#slidershow" data-slide-to="1">2</li> <li data-target="#slidershow" data-slide-to="2">3</li> </ol> <!-- 设置轮播图片 --> <div class="carousel-inner"> <div class="item active"> <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a> <div class="carousel-caption"> <h3>图片标题1</h3> <p>描述内容1...</p> </div> </div> <div class="item"> <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt=""></a> <div class="carousel-caption"> <h3>图片标题2</h3> <p>描述内容2...</p> </div> </div> <div class="item"> <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg" alt=""></a> <div class="carousel-caption"> <h3>图片标题3</h3> <p>描述内容3...</p> </div> </div> </div> <a class="left carousel-control" href="#slidershow" role="button"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#slidershow" role="button"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
JS:
$(function(){
$("#slidershow").carousel({
interval:2000
});
$("#slidershow a.left").click(function(){
$(".carousel").carousel("prev");
});
$("#slidershow a.right").click(function(){
$(".carousel").carousel("next");
});
});
carousel() 메소드에서 다음과 같은 특정 매개변수를 설정할 수 있습니다.
이를 사용하면 플러그인을 초기화할 때 다음과 같은 관련 매개변수를 전달할 수 있습니다.
$("#slidershow").carousel({
interval: 3000
});
Bootstrap 프레임워크의 캐러셀 플러그인은 사용자에게 몇 가지 특별한 호출 방법도 제공합니다. 간략한 설명은 다음과 같습니다.
.carousel("cycle"): 왼쪽에서 오른쪽으로 반복 재생
.carousel("pause"): 반복 재생을 중지합니다.
.carousel("number"): 지정된 프레임으로 반복합니다. 아래 첨자는 배열과 유사하게 0부터 시작합니다.
.carousel("prev"): 이전 프레임으로 돌아갑니다.
.carousel("next")：다음 프레임