bootstrap-轮播图

<!-- 
    1.写一个父级，class为carousel
        slide:添加滑动的效果
        data-interval    图片轮播间隔时间，单位ms
        data-ride="carousel" 页面一加载后就开始播放
    2.小圆点的内容放在class为carousel-indicators的层里
    3.轮播图的图片区域放在class为carousel-inner的层里
        每一项内容添加class为item的层
        图片说明文字放在class为carousel-caption的层里
    4.    左右按钮 a链接 class为carousel-control left/right
        锚点指向父级
-->
<div class="container">
    <div id="pic" class="carousel slide" data-interval="3000" data-ride="carousel" style="510px;margin:0 auto;">
        <!-- 小圆点 -->
        <ol class="carousel-indicators">
            <li class=" active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
        <!--轮播图的图片 -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="a.jpg" />
                <div class="carousel-caption">
                    <h3>小孩子1</h3>
                </div>
            </div>
            <div class="item">
                <img src="b.jpg" />
                <div class="carousel-caption">
                    <h3>小孩子2</h3>
                </div>
            </div>
            <div class="item">
                <img src="c.jpg" />
                <div class="carousel-caption">
                    <h3>美女</h3>
                </div>
            </div>
            <div class="item">
                <img src="d.jpg" />
                <div class="carousel-caption">
                    <h3>海贼王</h3>
                </div>
            </div>
        </div>
        <!-- 左右按钮-->
        <a href="#pic" class="carousel-control left" data-slide="prev">
            <span class="glyphicon glyphicon glyphicon-chevron-left"></span>
        </a>
        <a href="#pic" class="carousel-control right" data-slide="next">
            <span class="glyphicon glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</div>

效果：