Bootstrap轮播图学习使用

2019-11-19 17:39:15

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了Bootstrap轮播图的具体代码，供大家参考，具体内容如下

<!doctype html><html>  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title></title>    <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />    <style>      #pic{        width:900px;        margin:0 auto;      }      .carousel-caption{        color:#f00;      }    </style>  </head>  <body>    <!--carousel中文译为轮播，旋转木马 slide给图片添加运动效果；       data-interval是间隔时间，不能低于400否则易出问题，单位为ms即毫秒；       data-ride="carousel为页面一加载就开始轮播图片      carousel-caption是在图片上放置文字-->    <div class="container">      <div id="pic" class="carousel slide" data-interval="2000" data-ride="carousel">        <!--小圆点-->        <ol class="carousel-indicators">          <li class="active"></li>          <li></li>          <li></li>          <li></li>        </ol>        <!--轮播的图片-->        <div class="carousel-inner">          <div class="item active">            <img src="images/1.jpg"/>              <div class="carousel-caption">              <h4>标题1</h4>              <p>xxxxxxxxxxxxxxxxxxxx</p>            </div>          </div>          <div class="item">            <img src="images/2.jpg"/>            <div class="carousel-caption">              <h4>标题2</h4>              <p>xxxxxxxxxxxxxxxxxxxx</p>            </div>             </div>          <div class="item">            <img src="images/3.jpg"/>            <div class="carousel-caption">              <h4>标题3</h4>              <p>xxxxxxxxxxxxxxxxxxxx</p>            </div>             </div>          <div class="item">            <img src="images/4.jpg"/>            <div class="carousel-caption">              <h4>标题4</h4>              <p>xxxxxxxxxxxxxxxxxxxx</p>            </div>             </div>        </div>        <!--左右按钮-->          <a href="#pic" rel="external nofollow" rel="external nofollow" class="carousel-control left" data-slide="prev">‹</a>          <a href="#pic" rel="external nofollow" rel="external nofollow" class="carousel-control right" data-slide="next">›</a>      </div>    </div>    <script src="js/jquery-2.1.0.js"></script>    <script src="js/bootstrap.js"></script>  </body></html>

Bootstrap轮播图的效果：