bootstrap 淡入淡出banner轮播

    xiaoxiao2021-04-12  28

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

    <style>

    <!--添加淡入淡出的css-->

    .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://ju.6miu.com/read-668245.html

    最新回复(0)