bootstrap图片轮播

利用bootstrap实现图片轮播是非常easy的：

首先需要下载bootstrap，在head中引用bootstrap的css和js：

<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">   <script src="/scripts/jquery.min.js"></script>   <script src="/bootstrap/js/bootstrap.min.js"></script>

然后在body中写如下代码：

<div id="myCarousel" class="carousel slide">   <!-- 轮播（Carousel）指标 -->   <ol class="carousel-indicators">      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>      <li data-target="#myCarousel" data-slide-to="1"></li>      <li data-target="#myCarousel" data-slide-to="2"></li>   </ol>      <!-- 轮播（Carousel）项目 -->   <div class="carousel-inner">      <div class="item active">         <img src="<span style="font-family: Arial, Helvetica, sans-serif;">轮播的第一张图片</span><span style="font-family: Arial, Helvetica, sans-serif;">" alt="First slide"></span>      </div>      <div class="item">         <img src="<span style="font-family: Arial, Helvetica, sans-serif;">轮播的第二张图片</span>" alt="Second slide">      </div>      <div class="item">         <img src="轮播的第三张图片" alt="Third slide">      </div>   </div>   <!-- 轮播（Carousel）导航 -->   <a class="carousel-control left" href="#myCarousel"       data-slide="prev">‹</a>   <a class="carousel-control right" href="#myCarousel"       data-slide="next">›</a></div>

在代码中有三张轮播图片，路径需要自己更改，如果想要实现更多的图片轮播，可以增加或减少

<div class="item"></span><pre name="code" class="html"><span style="font-size:18px;"></div>

这样我们就实现了图片轮播的效果。