bootstrap 淡入淡出banner轮播

最新推荐文章于 2023-04-06 22:27:25 发布

IT设计菜鸟

最新推荐文章于 2023-04-06 22:27:25 发布

阅读量9.2k

点赞数 4

文章标签： bootstrap 淡入淡出

本文链接：https://blog.csdn.net/wen5775/article/details/70159708

版权

<html>

<body>

<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="5000">

<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>

<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>


</div>

</body>

</html>

<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>