찾다

집  >  기사  >  웹 프론트엔드  >  부트스트랩은 매일 캐러셀 플러그인을 배워야 합니다_javascript 기술

부트스트랩은 매일 캐러셀 플러그인을 배워야 합니다_javascript 기술

WBOY
WBOY원래의
2016-05-16 15:03:571685검색

Bootstrap Carousel 플러그인은 사이트에 슬라이더를 추가하는 유연하고 반응성이 뛰어난 방법입니다. 그 외에도 콘텐츠는 충분히 유연하며 이미지, iframe, 비디오 또는 배치하려는 기타 유형의 콘텐츠가 될 수 있습니다.

플러그인의 기능을 별도로 참조하려면 carousel.js를 참조해야 합니다. 또는 Bootstrap 플러그인 개요 장에서 언급한 대로 bootstrap.js 또는 bootstrap.min.js의 축소된 버전을 참조할 수 있습니다.

1. 예시
 다음은 Bootstrap Carousel 플러그인을 사용하여 요소를 반복하는 공통 구성 요소를 표시하는 간단한 슬라이드쇼입니다. 캐러셀을 구현하려면 해당 태그가 포함된 코드를 추가하기만 하면 됩니다. 데이터 속성을 사용할 필요가 없으며 간단한 클래스 기반 개발만 하면 됩니다. 

<!DOCTYPE html>
<html>
<head>
 <title>Bootstrap 实例 - 简单的轮播（Carousel）插件</title>
 <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 <script src="/scripts/jquery.min.js"></script>
 <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
 
<div id="myCarousel" class="carousel slide">
 <!-- 轮播（Carousel）指标 -->
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol> 
 <!-- 轮播（Carousel）项目 -->
 <div class="carousel-inner">
 <div class="item active">
 <img src="/media/uploads/2014/07/slide1.png" alt="First slide">
 </div>
 <div class="item">
 <img src="/media/uploads/2014/07/slide2.png" alt="Second slide">
 </div>
 <div class="item">
 <img src="/media/uploads/2014/07/slide3.png" alt="Third slide">
 </div>
 </div>
 <!-- 轮播（Carousel）导航 -->
 <a class="carousel-control left" href="#myCarousel"
 data-slide="prev">&lsaquo;</a>
 <a class="carousel-control right" href="#myCarousel"
 data-slide="next">&rsaquo;</a>
</div>
 
</body>
</html>

결과는 다음과 같습니다.

간단한 캐러셀 플러그인

2. 선택제목
.item 내의 .carousel-caption 요소를 통해 슬라이드에 제목을 추가할 수 있습니다. 여기에 선택적 HTML을 배치하면 자동으로 정렬되고 서식이 지정됩니다. 다음 예에서는 이를 보여줍니다. 

<!DOCTYPE html>
<html>
<head>
 <title>Bootstrap 实例 - 轮播（Carousel）插件的标题</title>
 <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 <script src="/scripts/jquery.min.js"></script>
 <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
 
<div id="myCarousel" class="carousel slide">
 <!-- 轮播（Carousel）指标 -->
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol> 
 <!-- 轮播（Carousel）项目 -->
 <div class="carousel-inner">
 <div class="item active">
 <img src="/media/uploads/2014/07/slide1.png" alt="First slide">
 <div class="carousel-caption">标题 1</div>
 </div>
 <div class="item">
 <img src="/media/uploads/2014/07/slide2.png" alt="Second slide">
 <div class="carousel-caption">标题 2</div>
 </div>
 <div class="item">
 <img src="/media/uploads/2014/07/slide3.png" alt="Third slide">
 <div class="carousel-caption">标题 3</div>
 </div>
 </div>
 <!-- 轮播（Carousel）导航 -->
 <a class="carousel-control left" href="#myCarousel"
 data-slide="prev">&lsaquo;</a>
 <a class="carousel-control right" href="#myCarousel"
 data-slide="next">&rsaquo;</a>
</div>
 
 
</body>
</html>

결과는 다음과 같습니다.

Carousel 플러그인 제목

3. 사용법

data 속성을 통해: data 속성을 사용하면 캐러셀의 위치를 ​​쉽게 제어할 수 있습니다.
data-slide 속성은 현재 위치를 기준으로 슬라이드의 위치를 ​​변경하는 데 사용되는 prev 또는 next 키워드를 허용합니다.
data-slide-to를 사용하여 원시 슬라이드 인덱스를 캐러셀 하단으로 이동하고, data-slide-to="2"는 슬라이더를 0부터 계산하여 특정 인덱스로 이동합니다.
data-ride="carousel" 속성은 페이지가 로드될 때 애니메이션을 시작하도록 캐러셀을 표시하는 데 사용됩니다.

JavaScript를 통해: Carousel은 다음과 같이 JavaScript를 통해 수동으로 호출할 수 있습니다.
$('.carousel').carousel()

4. 옵션
일부 옵션은 데이터 속성 또는 JavaScript를 통해 전달됩니다. 옵션은 아래 표에 나열되어 있습니다.

5. 방법
Carousel 플러그인의 유용한 방법은 다음과 같습니다.

6. 예시
다음 예에서는 메소드의 사용법을 보여줍니다. 

<!DOCTYPE html>
<html>
<head>
 <title>Bootstrap 实例 - 轮播（Carousel）插件方法</title>
 <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 <script src="/scripts/jquery.min.js"></script>
 <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
 
<div id="myCarousel" class="carousel slide">
 <!-- 轮播（Carousel）指标 -->
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0"
 class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol> 
 <!-- 轮播（Carousel）项目 -->
 <div class="carousel-inner">
 <div class="item active">
 <img src="/media/uploads/2014/07/slide1.png" alt="First slide">
 </div>
 <div class="item">
 <img src="/media/uploads/2014/07/slide2.png" alt="Second slide">
 </div>
 <div class="item">
 <img src="/media/uploads/2014/07/slide3.png" alt="Third slide">
 </div>
 </div>
 <!-- 轮播（Carousel）导航 -->
 <a class="carousel-control left" href="#myCarousel"
 data-slide="prev">&lsaquo;</a>
 <a class="carousel-control right" href="#myCarousel"
 data-slide="next">&rsaquo;</a>
 <!-- 控制按钮 -->
 <div style="text-align:center;">
 <input type="button" class="btn start-slide" value="Start">
 <input type="button" class="btn pause-slide" value="Pause">
 <input type="button" class="btn prev-slide" value="Previous Slide">
 <input type="button" class="btn next-slide" value="Next Slide">
 <input type="button" class="btn slide-one" value="Slide 1">
 <input type="button" class="btn slide-two" value="Slide 2"> 
 <input type="button" class="btn slide-three" value="Slide 3">
 </div>
</div>
<script>
 $(function(){
 // 初始化轮播
 $(".start-slide").click(function(){
 $("#myCarousel").carousel('cycle');
 });
 // 停止轮播
 $(".pause-slide").click(function(){
 $("#myCarousel").carousel('pause');
 });
 // 循环轮播到上一个项目
 $(".prev-slide").click(function(){
 $("#myCarousel").carousel('prev');
 });
 // 循环轮播到下一个项目
 $(".next-slide").click(function(){
 $("#myCarousel").carousel('next');
 });
 // 循环轮播到某个特定的帧
 $(".slide-one").click(function(){
 $("#myCarousel").carousel(0);
 });
 $(".slide-two").click(function(){
 $("#myCarousel").carousel(1);
 });
 $(".slide-three").click(function(){
 $("#myCarousel").carousel(2);
 });
 });
</script>
 
 
</body>
</html>

결과는 다음과 같습니다.

캐러셀 플러그인 방식

7. 이벤트

다음 표에는 Carousel 플러그인에서 사용되는 이벤트가 나열되어 있습니다. 이러한 이벤트는 함수의 후크로 사용될 수 있습니다.

예
다음 예에서는 이벤트 사용법을 보여줍니다. 

<!DOCTYPE html>
<html>
<head>
 <title>Bootstrap 实例 - 轮播（Carousel）插件事件</title>
 <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 <script src="/scripts/jquery.min.js"></script>
 <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
 
<div id="myCarousel" class="carousel slide">
 <!-- 轮播（Carousel）指标 -->
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0"
 class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol> 
 <!-- 轮播（Carousel）项目 -->
 <div class="carousel-inner">
 <div class="item active">
 <img src="/media/uploads/2014/07/slide1.png" alt="First slide">
 </div>
 <div class="item">
 <img src="/media/uploads/2014/07/slide2.png" alt="Second slide">
 </div>
 <div class="item">
 <img src="/media/uploads/2014/07/slide3.png" alt="Third slide">
 </div>
 </div>
 <!-- 轮播（Carousel）导航 -->
 <a class="carousel-control left" href="#myCarousel"
 data-slide="prev">&lsaquo;</a>
 <a class="carousel-control right" href="#myCarousel"
 data-slide="next">&rsaquo;</a>
</div>
<script>
 $(function(){
 $('#myCarousel').on('slide.bs.carousel', function () {
 alert("当调用 slide 实例方法时立即触发该事件。");
 });
 });
</script>
 
</body>
</html>

결과는 다음과 같습니다.

캐러셀 플러그인 이벤트

위 튜토리얼에 따라 직접 만든 예:

회전목마 플러그인은 같은 크기의 큰 사진 여러 장을 순서대로 재생하는 것입니다. 

//基本实例。

<div id="myCarousel" class="carousel slide">
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0"
 class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol>
 <div class="carousel-inner">
 <div class="item active">
 <img src="img/slide1.png" alt="부트스트랩은 매일 캐러셀 플러그인을 배워야 합니다_javascript 기술">
 </div>
 <div class="item">
 <img src="img/slide2.png" alt="第二张">
 </div>
 <div class="item">
 <img src="img/slide3.png" alt="第三张">
 </div>
 </div>

 <a href="#myCarousel" data-slide="prev" class="carousel-controlleft">&lsaquo;</a>
 <a href="#myCarousel" data-slide="next" class="carousel-controlright">&rsaquo;</a>
</div>

data 属性解释：

1.data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置；
2.data-slide-to 来向轮播底部创建一个原始滑动索引， data-slide-to="2"将把滑动块移动到一个特定的索引，索引从 0 开始计数。
3.data-ride="carousel"属性用户标记轮播在页面加载时开始动画播放。

如果在 JavaScript 调用就直接使用键值对方法，并去掉 data-；
//设置自定义属性

$('#myCarousel').carousel({
 //设置自动播放/2 秒
 interval : 2000,
 //设置暂停按钮的事件
 pause : 'hover',
 //只播一次
 wrap : false,
});

轮播插件还提供了一些方法，如下：

//点击按钮执行

$('button').on('click', function() {
 //点击后，自动播放
 $('#myCarousel').carousel('cycle');
 //其他雷同
});

事件

$('#myCarousel').on('slide.bs.carousel', function() {
 alert('当调用 slide 实例方式时立即触发');
});

$('#myCarousel').on('slid.bs.carousel', function() {
 alert('当轮播完成一个幻灯片触发');
});

更多内容可以参考：Bootstrap学习教程

以上就是本文的全部内容，希望对大家学习Bootstrap轮播（Carousel）插件有所帮助。

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：2장: 부트스트랩 페이지 레이아웃 style_javascript 기술다음 기사：2장: 부트스트랩 페이지 레이아웃 style_javascript 기술

관련 기사

더보기