轮播插件概述
当你在浏览某些很酷的网站时，你会注意到好的网站都有这么一个功能，图片或者视频在首页位置，如幻灯片一样，在轮播。
在Bootstrap中也有支持轮播的插件carousel。这是一种非常灵活的响应式的向站点添加滑块的方式，它可放置一切内容，如图片视频框架等。
创建轮播
- 创建内容容器，搭配Bootstrap中的网格系统实现更理想化布局
- 创建轮播内容容器<div>，class="carousel slide"，并赋予唯一ID
- 在轮播内容容器中，创建轮播指标无序列表<ol>，class="carousel-indicators"，
- 在无序列表中创建轮播指标<li data-target="#ID" data-slide-to="*"></li>------*为数字，从0~n;
- 有多少条轮播项目就有多少条<li>
- 在轮播内容容器中，创建轮播项目容器<div>，class="catousel-inner"
- <div class="item"><img src="..." alt="* slide"></div>
- 在轮播内容容器中创建用于表示上一页下一页的超链接按钮（这里用到了Bootstrap中的徽章）
实例
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<!--创建轮播指标-->
<div class="carousel slide" id="myCarousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slied-to="0" class="active"></li>
<li data-target="#myCarousel" data-slied-to="1"></li>
<li data-target="#myCarousel" data-slied-to="2"></li>
</ol>
<!--创建轮播项目-->
<div class="carousel-inner">
<div class="item active">
<img src="img/背景1.png" width="700px" height="400px" >
</div>
<div class="item">
<img src="img/背景2.png" width="700px" height="500px" >
</div>
<div class="item">
<img src="img/背景3.png" width="700px" height="500px">
</div>
</div>
<!--创建轮播导航-->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
代码解读：
<div class="carousel slide" id="目标ID">
<!--创建轮播指标-->
<ol class="carousel-indicators">
<li data-target="#目标ID" data-slide-to="*"></li> <!--*为阿拉伯数字-->
........ <!--有多少条轮播项目就有多少条<li>-->
</ol>
<!--创建轮播项目-->
<div class="carousel-inner">
<div class="item">
<img src="...." >
</div>
<div class="item">
<img src="...." >
</div>
.......
</div>
<!--创建轮播导航-->
<a class="left carousel-control" href="#目标ID" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#目标ID" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--轮播导航结束-->
</div>运行结果
带有标题文本（描述轮播项目）的轮播
创建这个只需要在<div class="item">中添加带有class="catousel-caption"便可添加标题
案例
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div class="carousel slide" id="myCarousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slied-to="0" class="active"></li>
<li data-target="#myCarousel" data-slied-to="1"></li>
<li data-target="#myCarousel" data-slied-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/背景1.png" width="700px" height="400px" >
<!--向轮播项目添加标题-->
<div class="carousel-caption">标题1</div>
</div>
<div class="item">
<img src="img/背景2.png" width="700px" height="500px" >
<!--向轮播项目添加标题-->
<div class="carousel-caption">标题二</div>
</div>
<div class="item">
<img src="img/背景3.png" width="700px" height="500px">
<!--向轮播项目添加标题-->
<div class="carousel-caption">标题三</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
运行结果
选项
方法
在轮播插件中，方法的存在是为了控制轮播，比如手动控制上一页下一页（这个通过轮播导航也能实现），暂停轮播等，使用方法也很简单，通过<input>定义控制按钮（创建自定义类），在Java Script中进行相应的处理。
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div class="carousel slide" id="myCarousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slied-to="0" class="active"></li>
<li data-target="#myCarousel" data-slied-to="1"></li>
<li data-target="#myCarousel" data-slied-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/背景1.png" width="700px" height="400px" >
<div class="carousel-caption">标题1</div>
</div>
<div class="item">
<img src="img/背景2.png" width="700px" height="500px" >
<div class="carousel-caption">标题二</div>
</div>
<div class="item">
<img src="img/背景3.png" width="700px" height="500px">
<div class="carousel-caption">标题三</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--轮播控制按钮-->
<div style="text-align: center">
<input type="button" class="btn start-slide" value="初始化轮播">
<input type="button" class="btn pause-slide" value="停止轮播">
<input type="button" class="btn" id="previous-slide" value="上一页">
<input type="button" class="btn next-slide" value="下一页">
<input type="button" class="btn slide-one" value="第一张">
<input type="button" class="btn slide-two" value="第二张">
<input type="button" class="btn slide-three" value="第三张">
</div>
</div>
</div>
</div>
<script>
$(function () {
$('.start-slide').click(function () {
$("#myCarousel").carousel('cycle');
}); //开始（初始化）轮播
$('.pause-slide').click(function () {
$("#myCarousel").carousel('pause');
}); //停止轮播
$('#previous-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>代码解读：调用方法，对按钮创建自定义类或者赋予唯一ID都可，在点击按钮时触发点击事件click，执行click中的函数function(){
$("#轮播ID").carousel('方法')}。
运行结果
事件
实例
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div class="carousel slide" id="myCarousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slied-to="0" class="active"></li>
<li data-target="#myCarousel" data-slied-to="1"></li>
<li data-target="#myCarousel" data-slied-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/背景1.png" width="700px" height="400px" >
<div class="carousel-caption">标题1</div>
</div>
<div class="item">
<img src="img/背景2.png" width="700px" height="500px" >
<div class="carousel-caption">标题二</div>
</div>
<div class="item">
<img src="img/背景3.png" width="700px" height="500px">
<div class="carousel-caption">标题三</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<script>
$(function () {
$('#myCarousel').on('slide.bs.carousel',function () {
alert("slide实例方法出现时，将会出现此框");
});
});
</script>代码解读：slide实例---发生图片轮播时产生。触发事件alert弹窗。
那么slide事件与slid事件有什么区别呢？slide是当一出现轮播时，立即触发，而slid事件则是，出现轮播并且等待CSS过渡效果结束时，才触发