前提
引用
<script src="scripts/jquery.js"></script>
<link href="bootstrap/bootstrap.min.css" rel="stylesheet" />
<script src="bootstrap/bootstrap.min.js"></script>
<!-- 轮播carousel -->
<div id="carouselOne" class="carousel slide">
<!-- 索引 -->
<ol class="carousel-indicators">
<li data-target="#carouselOne" data-slide-to="0" class="active"></li>
<li data-target="#carouselOne" data-slide-to="1"></li>
<li data-target="#carouselOne" data-slide-to="2"></li>
</ol>
<!-- 内容 -->
<div class="carousel-inner">
<div class="item active" style="height:400px;line-height:400px;background:#ddd;text-align:center;">slide1</div>
<div class="item" style="height:400px;line-height:400px;background:#ddd;text-align:center;">slide2</div>
<div class="item" style="height:400px;line-height:400px;background:#ddd;text-align:center;">slide3</div>
</div>
<!-- 控制器 -->
<div class="carousel-control left" href="#carouselOne" data-slide="prev" style="line-height:400px;">‹</div>
<div class="carousel-control right" href="#carouselOne" data-slide="next" style="line-height:400px;">›</div>
</div>
效果