bootstrap下 图片轮播的实现

<div class="container">

<div data-ride="carousel" id="carousel_container" class="carousel slide">

<!-- 图片容器 -->

<div class="carousel-inner">

<div class="item"><img src="images/1.jpg" style="width:500px height:100px"></div>

<div class="item active"><img src="images/2.jpg"></div>

<div class="item"><img src="images/3.jpg"></div>

</div>

<!-- 小圆圈 -->

<ol class="carousel-indicators">

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

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

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

</ol>

<!-- 左右按钮 -->

<a href="#carousel_container" data-slide="prev" class="left carousel-control">

<span class="glyphicon glyphicon-chevron-left"></span>

</a>

<a href="#carousel_container" data-slide="next" class="right carousel-control">

<span class="glyphicon glyphicon-chevron-right"></span>

</a>

</div>

</div>