bootstrap 淡入淡出banner轮播

最新推荐文章于 2020-11-11 13:42:01 发布

front_end_fan

最新推荐文章于 2020-11-11 13:42:01 发布

阅读量1.9k

点赞数

分类专栏： bootstrap 文章标签： bootstrap 淡入淡出轮播

本文链接：https://blog.csdn.net/qq_39198420/article/details/78316249

版权

bootstrap 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
 <head>
  <title>Document</title>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <link rel="stylesheet" href="bootstrap.min.css">
     <script src="jquery.js"></script>

  <script src="bootstrap.min.js"></script>

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


 </head>

<body>
<!--banner-->
<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel"  data-interval="2000" style="width: 2000px;">
    <!-- 轮播（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="yo.gif" width="10%">
        </div>
        <div class="item">
            <img src="yo.gif" width="10%">
        </div>
        <div class="item">
            <img src="yo.gif" width="10%">
        </div>
        <div class="item">
            <img src="yo.gif" width="10%">
        </div>
        <div class="item">
            <img src="yo.gif" width="10%">
        </div>
        <div class="item">
            <img src="yo.gif" width="10%">
        </div>
    </div>
    </div>
    <!-- 轮播（Carousel）导航 -->

</div>
<!--banner-->
</body>

</html>

front_end_fan

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
bootstrap 淡入淡出banner轮播

<!doctype html><html lang="en"> <head> <title>Document</title> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" conte
复制链接

扫一扫