Bootstrap插件 carousel.js

carousel.js是bootstrap的幻灯片组件，用于循环显示元素，例如轮播(不支持嵌套)

html

    <!-- .slide控制轮播及过渡动画 -->
    <!-- data-ride="carousel" 将轮播标记为从页面加载开始动画 -->
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- 指示器 -->
        <ol class="carousel-indicators">
            <!-- data-slide-to="*" 通过索引更改幻灯片的位置-->
            <!-- .active控制页面加载后第一次指示器圆点所出现的位置 -->
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active" ></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <!-- .item下放置幻灯片控件下的每一个图片项目 -->
            <!-- .active控制页面加载后第一次显示的图片 -->
            <div class="item active">
                <img src="1.jfif" alt="...">
                <!-- .carousel-caption内可以为幻灯片添加字幕 -->
                <div class="carousel-caption">
                    龙岭迷窟
                </div>
            </div>
            <div class="item">
                <img src="2.jfif" alt="...">
                <div class="carousel-caption">
                    终结者:黑暗命运
                </div>
            </div>
            <div class="item">
                <img src="3.jfif" alt="...">
                <div class="carousel-caption">
                    书房里的世界观
                </div>
            </div>
        </div>
        <!-- 操作(上一页/下一页) -->
        <!-- href="#carousel-example-generic" 绑定指示器做出相应的行为 -->
        <!-- data-slide="prev/next" 控制行为 上一页/下一页 -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <!-- aria-hidden="true" 图标是否可访问 当阅读者使用辅助工具阅读时，让阅读者知道其作用 -->
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <!-- .sr-only宽高设置为1px margin:-1px overflow:hideen 即在页面上不予显示 -->
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

效果