## 轮播插件 carousel.js Bootstrap 的轮播插件（carousel.js）是一个灵活的、响应式的、无缝循环播放的幻灯片切换插件，它的内容可以是图片、视频、或者其他任何内容。 **整体结构** Bootstrap中的轮播由一个 class="carousel" 的容器定义，其中包含轮播指示器、轮播内容、轮播的控制按钮。为了确保在播放时，能够对控制按钮和轮番指示器进行正常定位，需要为容器定义一个 id。 ```html <div id="myBanner" class="carousel" data-ride="carousel"> </div> ``` **1.** 轮播指示器 轮播指示器是一个 class="carousel-indicators" 的有序列表，用来指示轮播的播放状态，对用户表现为一系列的小圆圈，实心圆表示当前处于活动状态的轮番条目。 有序列表子元素 li 的个数必须与轮播内容中的元素个数相等。子元素 li 的 data-target 属性值指示目标对象，必须设置为轮播容器的 id 值；data-slide-to 属性指示点击小圆圈时所要播放的轮播条目的索引值（索引从 0 开始）。还可以为默认处于活动状态的轮播条目添加 .active 类。默认是第一个条目处于活动状态。 ```html <ol class="carousel-indicators"> <li data-target="#myBanner" data-slide-to="0"></li> <li data-target="#myBanner" data-slide-to="1"></li> <li data-target="#myBanner" data-slide-to="2" class="active"></li> </ol> ``` **2.** 轮播内容 轮播内容是一个轮番条目的列表，整个列表包含在一个 class="carousel-inner" 的容器中，列表中可以包含多个轮播条目，每个轮播条目包含在一个 class="item" 的容器中。还可以为默认处于活动状态的轮播条目添加 .active 类。默认是第一个条目处于活动状态。如果添加 .active 类，并确保它与列表指示器中定义的默认状态保持一致。最简单的轮播内容只包含图片就可以了。例如： ```html <div class="carousel-inner"> <div class="item active"> <img src="../img/timg.jpg" /> </div> <div class="item"> <img src="../img/boot.png" /> </div> </div> ``` 如果需要给图片添加自定义内容，可以通过一个 class="carousel-caption" 的容器来添加标题和说明。 ```html <div class="carousel-inner" > <div class="item active"> <img src="../img/timg.jpg" /> <div class="carousel-caption"> <h4>Second Thumbnail label</h4> <p>Cras justo odio, dapibus ...</p> </div> </div> <div class="item"> <img src="../img/boot.png" /> <div class="carousel-caption"> <h4>Second Thumbnail label</h4> <p>Cras justo odio, dapibus ...</p> </div> </div> </div> ``` **3.** 轮播的控制按钮 轮播的控制按钮，用来人工控制轮播的播放，它包含两个按钮，一个控制向前播放，一个控制向后播放。通过 .carousel-control 定义按钮的样式，.left 和 .right 定义按钮的方向。href 属性定义轮播包含框的 id。data-slide 属性定义播放顺序，取值 "prev" 表示播放上一个条目，取值 "next" 表示播放下一个条目。 ```html <a class="carousel-control left" href="#myBanner" data-slide="prev">&lsaquo;</a> <a class="carousel-control right" href="#myBanner" data-slide="next">&rsaquo;</a> ```  ***** **调用方式** **1.** 通过data数据属性 如果不想编写JavaScript代码，就可以使用 data 属性来调用轮播插件，并实现与轮播插件的交互功能。轮播插件需要两个交互功能：一个是点击控制按钮进行切换，一个是点击轮播指示器的小圆点进行切换。 1） 如果希望用户点击控制按钮进行切换，只需为左侧按钮提供 data-slide="prev" 属性，为右侧按钮提供 data-slide="next" 属性即可。 ```html <a class="carousel-control left" href="#myBanner" data-slide="prev">&lsaquo;</a> <a class="carousel-control right" href="#myBanner" data-slide="next">&rsaquo;</a> ``` 2）如果希望用户点击轮播指示器的小圆点进行切换，需要为轮播指示器的 元素提供 data-target 和 data-slide-to 属性。data-target 属性的值为轮播包含框的 id，data-slide-to 属性的值为点击小圆圈后，要切换到的轮播条目的索引，即 class="item" 元素的索引，索引从 0 开始。 ```html <ol class="carousel-indicators"> <li data-target="#myBanner" data-slide-to="0"></li> <li data-target="#myBanner" data-slide-to="1"></li> <li data-target="#myBanner" data-slide-to="2" class="active"></li> </ol> ``` **2.** 通过JavaScript调用轮播 JavaScript调用轮番其实很简单，只需在脚本中调用 carousel() 方法。 Bootstrap还提供了其它一些方法，可以根据需要选择使用： * .carousel('cycle')：从左向右循环播放。 * .carousel('pause')：暂停循环播放。 * .carousel(number)：循环到指定帧（下标从0开始，类似数组）。 * .carousel('prev')：返回到上一帧。 * .carousel('next')：播放下一帧。 通过JavaScript调用，虽然轮番可以自动播放，但两个控制按钮还无法正常工作。这时，就可以调用 carousel("prev") 和 carousel("next") 方法，来实现交互功能。 ```js $('.carousel a.left').click(function(){ $('.carousel').carousel("prev"); }); $('.carousel a.right').click(function(){ $('.carousel').carousel("next"); }); ``` ***** **轮播插件的选项** | 名称 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | interval | number | 5000 | 自动循环时，每个项目延迟的时间量。如果为 false，轮播将不会自动循环 | | pause | string | "hover" | 当鼠标进入轮番区域时，暂停循环，鼠标移出时继续循环 | | wrap | boolean | true | 轮播是否连续循环 | | keyboard | boolean | true | 轮播是否对键盘事件作出反应 | 调用 carousel() 方法时，可以将这些选项作为一个对象参数。如下，每个图片显示1秒 : ```js $('.carousel').carousel(({ interval: 1000 }); ``` ***** **轮播图事件** | 事件 | 含义 | | --- | --- | | slide.bs.carousel | 当 slide 实例方法被调用时，立即触发该事件 | | slid.bs.carousel | 当切换完一帧后，触发该事件 | ~~~js $('#myBanner').on('slide.bs.carousel', function () { alert('1'); }) ~~~