Bootstrap: 样式CSS：carousel轮换 图片的使用

时间：2023-11-30 23:43:32

Bootstrap 轮播（Carousel）插件

　　Bootstrap轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

Bootstrap: 样式CSS：carousel轮换 图片的使用如果您想要单独引用该插件的功能，那么您需要引用 carousel.js。或者，您可以引用bootstrap.js 或压缩版的 bootstrap.min.js。

js和css的引入：

<link href="scripts/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

     <script type="text/javascript" src="scripts/jquery/1.10.2/jquery.min.js"></script>

     <script type="text/javascript" src="scripts/bootstrap/3.3.4/js/bootstrap.min.js"></script>

html代码

<body>

        <div id="myCarousel" class="carousel slide">

            <!-- 轮播（Carousel）指标 -->

           <ol class="carousel-indicators">

              <li data-target="#myCarousel" data-slide-to="" class="active"></li>

              <li data-target="#myCarousel" data-slide-to=""></li>

              <li data-target="#myCarousel" data-slide-to=""></li>

           </ol>

            <!-- 轮播（Carousel）项目 -->

           <div class="carousel-inner">

              <div class="item active">

                <img src="data:images/snLine.gif" alt="First slide">

            </div>

            <div class="item">

                <img src="data:images/snLine.jpg" alt="Second slide">

            </div>

            <div class="item">

                <img src="data:images/usLine2.jpg" alt="Third slide">

            </div>

           </div>

            <!-- 轮播（Carousel）导航 -->

           <a class="carousel-control left" href="#myCarousel"

              data-slide="prev">&lsaquo;</a>

           <a class="carousel-control right" href="#myCarousel"

              data-slide="next">&rsaquo;</a>

        </div>

 </body>

效果图：

Bootstrap: 样式CSS：carousel轮换 图片的使用

相关文章