지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

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

WBOY
풀어 주다： 2016-05-16 15:27:57
원래의
1321명이 탐색했습니다.

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")：다음 프레임

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

관련 라벨：
bootstrap js 图片轮播
원천：php.cn
이전 기사：JavaScript에서 백스페이스 키를 비활성화하는 방법 다음 기사：js 텍스트 상자 입력 내용 지능형 프롬프트 effect_javascript 기술
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
여러 경로에 선언된 작업자 풀이 임계값을 고려하지 않고 여전히 CPU 사용량을 유지할 수 있습니까? CPU 집약적인 작업을 처리하기 위해 작업자 풀이 있는 node.js 시스템을 찾고 있지만 여러 경로에서의 CPU 사용량에 대해 약간 혼란스럽습니다. 시나리오는 ...
에서 2024-04-06 19:54:23
0
1
444
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
숨겨진 측면 패널 표시: 선택됨 애니메이션 햄버거 메뉴를 통해 보기로 전환할 수 있는 탐색 메뉴를 측면 패널에 갖고 싶습니다. JS 없이 CSS만 사용하여 만들고 싶습니다. :checked 의사...
에서 2024-04-06 15:49:33
0
1
319
Nuxt.js로 생성된 대시보드를 배포하기 위해 SSG를 사용해야 합니까? Nuxt.js를 사용하여 내부용 대시보드를 개발하겠습니다. 내부 대시보드이므로 범용 스키마가 필요하지 않습니다. 일반적으로 대부분의 대시보드는 SPA에서 개발됩니...
에서 2024-04-06 13:17:44
0
1
493
Electron은 사전 로드 시 AppData를 가져옵니다. 사전 로드된 AppData 디렉터리를 얻는 방법은 무엇입니까? Background.js[...]asyncfunctioncreateWindow(){constwin=...
에서 2024-04-06 11:05:31
0
1
417
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿