Document
<!-- 轮播图的主容器 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/8b82b9014a90f6030add233a3b12b31bb051ed5a.jpg"
style="width:100%;height: 600px;">
<div class="carousel-caption">
1
</div>
</div>
<div class="item">
<img src="https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/8b82b9014a90f6030add233a3b12b31bb051ed5a.jpg"
style="width:100%;height: 600px;">
<div class="carousel-caption">
2
</div>
</div>
<div class="item">
<img src="https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/8b82b9014a90f6030add233a3b12b31bb051ed5a.jpg"
style="width:100%;height: 600px;">
<div class="carousel-caption">
3
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<button class="btn btn-primary pause">暂停</button>
<button class="btn btn-primary prev">上一页</button>
<button class="btn btn-primary next">下一页</button>
<script src="./js/jquery-1.12.4.js"></script>
<script src="./js/bootstrap.js"></script>
<script>
/* js比data-interval的优先级大 */
/* $('.carousel').carousel({
interval: 3000
}) */
/* 暂停轮播图的播放 */
/* $('.pause').click(function(){
$('.carousel').carousel('pause')
}) */
/* 控制轮播图的上一页 */
/* $('.prev').click(function(){
$('.carousel').carousel('prev')
}) */
/* 控制轮播图的下一页 */
/* $('.next').click(function(){
$('.carousel').carousel('next')
}) */
/* 当轮播完成其幻灯片转换时会触发此事件 */
$('.carousel').on('slide.bs.carousel', function () {
console.log('我轮播了一次');
})
</script>