bootstrap轮播carousel

前提

引用

 <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>

效果