第二百五十一节，Bootstrap项目实战--响应式轮播图

<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 tp1">                                <!--设置轮播器图片样式-->
<a href="#"><img src="img/1.jpg" alt="第一张"></a>
</div>
<div class="item tp2">
<a href="#"><img src="img/2.jpg" alt="第二张"></a>
</div>
<div class="item tp3">
<a href="#"><img src="img/3.jpg" alt="第三张"></a>
</div>
</div>
<!--设置轮播器箭头区域-->
<a href="#myCarousel" data-slide="prev" class="carousel-control left">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#myCarousel" data-slide="next" class="carousel-control right">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>

/*轮播器--------------------------------------------------------------------------------------------------------------*/
/*将轮播器头部外边距设置50像素*/
#myCarousel {
margin: 50px 0 0 0;
}
.carousel-inner .item img {
margin: 0 auto;
}
.tp1{
background:#ECEDF1;
}
.tp2{
background:#88AED3;
}
.tp3{
background:#22AEE3;
}

/**
* Created by admin on 2017/5/2.
*/
$(function () {
$('#myCarousel').carousel({
//设置自动播放/3 秒
interval: 3000,
});
});