1、bootstrap carousel的基本轮播效果
<html>
<body>
<!--banner-->
<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="5000">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
<li data-target="#carousel" data-slide-to="3"></li>
<li data-target="#carousel" data-slide-to="4"></li>
<li data-target="#carousel" data-slide-to="5"></li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="img/adv_03.jpg" width="100%">
</div>
<div class="item">
<img src="img/adv_04.jpg" width="100%">
</div>
<div class="item">
<img src="img/adv_05.jpg" width="100%">
</div>
<div class="item">
<img src="img/adv_06.jpg" width="100%">
</div>
<div class="item">
<img src="img/adv_01.jpg" width="100%">
</div>
<div class="item">
<img src="img/adv_02.jpg" width="100%">
</div>
</div>
</div>
<!-- 轮播（Carousel）导航 -->
</div>
<!--banner-->
</body>
</html>2、加入淡入淡出样式
<!--添加淡入淡出的css-->
<style>
.carousel-fade .carousel-inner .item{ opacity:0; -webkit-transition-property:opacity;-moz-transition-property:opacity ; -ms-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity ;}
.carousel-fade .carousel-inner .active{ opacity: 1;}
.carousel-fade .carousel-inner .active.left,.carousel-fade .carousel-inner .active.right{left: 0;opacity: 0;}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {opacity: 1;}
</style>引用地址：https://blog.csdn.net/wen5775/article/details/70159708