Bootstrap 3 轮播插件 ( Carousel )
Bootstrap 3 内置了 轮播 ( Carousel) 插件 用于给站点自动轮播动画
Bootstrap .carousel 和 .slide CSS 类可以用来生成一个轮播动画
下面的范例是一个简单的幻灯片，使用 Bootstrap 轮播 (carousel) 插件显示了一个循环播放元素的通用组件
<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> <li data-target="#myCarousel" data-slide-to="3"></li> <li data-target="#myCarousel" data-slide-to="4"></li> <li data-target="#myCarousel" data-slide-to="5"></li> </ol> <!-- 轮播 ( carousel ) 项目 --> <div class="carousel-inner"> <div class="item active"> <img src="/static/i/img1.jpg"> </div> <div class="item"> <img src="/static/i/img2.jpg"> </div> <div class="item"> <img src="/static/i/img3.jpg"> </div> <div class="item"> <img src="/static/i/img4.jpg"> </div> <div class="item"> <img src="/static/i/img5.jpg"> </div> <div class="item"> <img src="/static/i/img6.jpg"> </div> </div> <!-- 轮播( Carousel ) 导航 --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹ </a> <a class="carousel-control right" href="#myCarousel" data-slide="next">› </a> </div>
运行以上范例，输出结果如下
可选的标题
我们可以通过 .item 内的 .carousel-caption 元素向幻灯片添加标题
标题可以是任何可选的 HTML 即可，它会自动对齐并格式化
<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> <li data-target="#myCarousel" data-slide-to="3"></li> <li data-target="#myCarousel" data-slide-to="4"></li> <li data-target="#myCarousel" data-slide-to="5"></li> </ol> <!-- 轮播 ( carousel ) 项目 --> <div class="carousel-inner"> <div class="item active"> <img src="/static/i/img1.jpg"> <div class="carousel-caption">图片说明 1</div> </div> <div class="item"> <img src="/static/i/img2.jpg"> <div class="carousel-caption">图片说明 2</div> </div> <div class="item"> <img src="/static/i/img3.jpg"> <div class="carousel-caption">图片说明 3</div> </div> <div class="item"> <img src="/static/i/img4.jpg"> <div class="carousel-caption">图片说明 4</div> </div> <div class="item"> <img src="/static/i/img5.jpg"> <div class="carousel-caption">图片说明 5</div> </div> <div class="item"> <img src="/static/i/img6.jpg"> <div class="carousel-caption">图片说明 6</div> </div> </div> <!-- 轮播( Carousel ) 导航 --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹ </a> <a class="carousel-control right" href="#myCarousel" data-slide="next">› </a> </div>
运行以上范例，输出结果如下
使用方法介绍
-
通过 data 属性
使用 data 属性可以很容易控制轮播( Carousel ) 的位置
-
属性 data-slide 接受关键字 prev 或 next ，用来改变幻灯片相对于当前位置的位置
-
属性 data-slide-to 用来来向轮播传递一个原始滑动索引， data-slide-to="2" 将把滑块移动到一个特定的索引，索引从 0 开始计数
-
属性 data-ride="carousel" 用于标记轮播在页面加载时就开始动画播放
-
-
通过 JavaScript
轮播 ( carousel ) 可通过 JavaScript 手动调用
$('.carousel').carousel()
选项
下表列出了轮播插件可以通过 data 属性或 JavaScript 来传递的的属性
| 选项 | 类型 | 属性 | 描述/默认值 |
|---|---|---|---|
| interval | number | data-interval | 自动循环每个项目之间延迟的时间量 如果为 false，轮播将不会自动循环 默认值：5000 |
| pause | string | data-pause | 鼠标进入时暂停轮播循环 鼠标离开时恢复轮播循环 默认值："hover" |
| wrap | boolean | data-wrap | 轮播是否连续循环 默认值：true |
方法
下表列出了轮播插件中可以使用的方法
| 方法 | 描述 | 范例 |
|---|---|---|
| .carousel(options) | 使用 options 初始化轮播 并开始循环项目 |
$('#id').carousel({ interval: 2000 }) |
| .carousel('cycle') | 从左到右循环轮播项目 | $('#id').carousel('cycle') |
| .carousel('pause') | 停止轮播循环项目 | $('#id').carousel('pause') |
| .carousel(number) | 循环轮播到某个特定的帧 从 0 开始计数，与数组类似 |
$('#id').carousel(number) |
| .carousel('prev') | 循环轮播到上一个项目 | $('#id').carousel('prev') |
| .carousel('next') | 循环轮播到下一个项目 | $('#id').carousel('next') |
下面的范例演示了轮播插件方法的使用
<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="/static/i/img1.jpg"> <div class="carousel-caption">图片说明 1</div> </div> <div class="item"> <img src="/static/i/img2.jpg"> <div class="carousel-caption">图片说明 2</div> </div> <div class="item"> <img src="/static/i/img3.jpg"> <div class="carousel-caption">图片说明 3</div> </div> </div> <!-- 轮播( Carousel ) 导航 --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</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>
运行以上范例，输出结果如下
事件
下表列出了轮播 ( carousel ) 插件可以使用的事件
| 事件 | 描述 | 范例 |
|---|---|---|
| slide.bs.carousel | 当调用 slide 实例方法时立即触发该事件 | $('#id').on('slide.bs.carousel', function () { // 执行一些动作... }) |
| slid.bs.carousel | 当轮播完成幻灯片过渡效果时触发该事件 | $('#id').on('slid.bs.carousel', function () { // 执行一些动作... }) |
下面的范例演示了轮播插件事件的使用
<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="/static/i/img1.jpg"> </div> <div class="item"> <img src="/static/i/img2.jpg"> </div> <div class="item"> <img src="/static/i/img3.jpg"> </div> </div> <!-- 轮播( Carousel ) 导航 --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹ </a> <a class="carousel-control right" href="#myCarousel" data-slide="next">› </a> </div> <script> $(function(){ $('#myCarousel').on('slide.bs.carousel',function(){ $("#message").append("<p>" + new Date() + ": 当调用 slide 实例方法时立即触发该事件</p>"); }); }); </script>
运行以上范例，输出结果如下
