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>

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