Bootstrap3 轮播之个人学习笔记

最新推荐文章于 2020-06-01 20:22:58 发布

原创最新推荐文章于 2020-06-01 20:22:58 发布 · 907 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

Bootstrap 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用Bootstrap3实现轮播图效果，并提供详细的代码示例及使用方法，包括平滑过渡、轮播控制等关键特性。

Bootstrap3 轮播

标签（空格分隔）： Bootstrap

目标

实现Bootstrap 自带的轮播效果。

效果图：
这里写图片描述

参考代码：

<body style="width:900px; margin-left:auto; margin-right:auto;">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" style="text-align:center">
        <div class="item active">
          <img alt="First slide" src="http://placehold.it/900x500/78EB09/FFEB09/&text=First slide" ></img>
        </div>
        <div class="item">
          <img alt="Second slide" src="http://placehold.it/900x500/78EB09/FFEB09/&text=Second slide" ></img>
        </div>
        <div class="item">
          <img alt="Third slide" src="http://placehold.it/900x500/78EB09/FFEB09/&text=Third slide"  ></img>
        </div>
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>
 <script src="js/jquery-2.0.3.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
 <script type="text/javascript">
//$('.carousel').carousel('next');
 </script>
 </body>

Internet Explorer 8 & 9 不支持过渡动画效果
Bootstrap 基于 CSS3 实现动画效果，但是 Internet Explorer 8 & 9 不支持这些必要的 CSS 属性。因此，使用这两种浏览器时将会丢失过渡动画效果。而且，Bootstrap 并不打算使用基于 jQuery 实现替代功能。