부트스트랩 이미지 캐러셀 효과_자바스크립트 기술 종합 분석

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="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"  class="lazy" alt=""></a>
 </div>
 <div class="item">
 <a href="##"><img src="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"  class="lazy" alt=""></a>
 </div>
 …
 <div class="item">
 <a href="##"><img src="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg"  class="lazy" 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="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"  class="lazy" alt=""></a>
 <!-- 图片对应标题和描述内容 -->
 <div class="carousel-caption">
 <h3 id="图片标题">图片标题</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  src="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201512/201512392831189.jpg&#63;201511392841?x-oss-process=image/resize,p_40"  class="lazy"    style="max-width:90%" alt="부트스트랩 이미지 캐러셀 효과_자바스크립트 기술 종합 분석" ></a>
 <div class="carousel-caption">
 <h3 id="图片标题">图片标题1</h3>
 <p>描述内容1...</p>
 </div>
 </div>
 <div class="item">
 <a href="##"><img  src="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201512/201512392831189.jpg&#63;201511392841?x-oss-process=image/resize,p_40"  class="lazy"    style="max-width:90%" alt="부트스트랩 이미지 캐러셀 효과_자바스크립트 기술 종합 분석" ></a>
 <div class="carousel-caption">
 <h3 id="图片标题">图片标题2</h3>
 <p>描述内容2...</p>
 </div>
 </div>
 <div class="item">
 <a href="##"><img  src="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201512/201512392831189.jpg&#63;201511392841?x-oss-process=image/resize,p_40"  class="lazy"    style="max-width:90%" alt="부트스트랩 이미지 캐러셀 효과_자바스크립트 기술 종합 분석" ></a>
 <div class="carousel-caption">
 <h3 id="图片标题">图片标题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="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"  class="lazy" alt=""></a>
 <div class="carousel-caption">
 <h3 id="图片标题">图片标题1</h3>
 <p>描述内容1...</p>
 </div>
 </div>
 <div class="item">
 <a href="##"><img src="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"  class="lazy" alt=""></a>
 <div class="carousel-caption">
 <h3 id="图片标题">图片标题2</h3>
 <p>描述内容2...</p>
 </div>
 </div>
 <div class="item">
 <a href="##"><img src="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg"  class="lazy" alt=""></a>
 <div class="carousel-caption">
 <h3 id="图片标题">图片标题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")：다음 프레임

이상은 자바스크립트 이미지 캐러셀에 대한 자세한 소개입니다. 이 글이 자바스크립트 프로그래밍을 배우는 모든 분들께 도움이 되기를 바랍니다.