bootstrap轮播图

187 阅读1分钟
carousel{
            width: 500px;
        }

html如下:

<!-- 轮播图 -->
    <!-- slide 切换的过渡 -->
    <!-- data-ride="carousel" 实现轮播效果 -->
    <!-- data-interval="2000" 时间2s -->
    <div class="carousel slide" id="carousel" data-ride="carousel" data-interval="2000"> 
        <!-- 圆圈 -->
        <!-- 轮播(Carousel)指标 -->
        <ol class="carousel-indicators">
            <!-- data-slide-to="0" 第一个小点 -->
            <li class="active" data-target="#carousel" data-slide-to="0"></li>
            <li data-target="#carousel" data-slide-to="1"></li>
            <li data-target="#carousel" data-slide-to="2"></li>
        </ol>
        <!-- 图片 -->
        <div class="carousel-inner" id="pian">
            <div class="item active">
                <img src="https://img0.baidu.com/it/u=3340111814,1006675052&fm=26&fmt=auto" alt="">
            </div>
            <div class="item">
                <img src="https://img0.baidu.com/it/u=3340111814,1006675052&fm=26&fmt=auto" alt="">
            </div>
            <div class="item">
                <img src="https://img0.baidu.com/it/u=3340111814,1006675052&fm=26&fmt=auto" alt="">
            </div>
        </div>
        <!-- 左右按钮 -->
        <a href="#carousel" class="left carousel-control" data-slide="prev">
            <!-- glyphicon-chevron-left 左箭头 -->
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <!--  glyphicon-chevron-right you箭头 -->
        <a href="#carousel" class="right carousel-control" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>