Bootstrapはカルーセルの効果を実現します

<div class="box">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- インジケーター -->
            <ol class="carousel-indicators">
                <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>
                <li data-target="#carousel-example-generic" data-slide-to="3"></li>
            </ol>

            <!-- スライドのラッパー -->
            <div class="carousel-inner" role="listbox">
                <div class="item アクティブ">
                    <img src="./images/xuezhong_1.jpg" alt="...">
                    <div class="carousel-caption">
                        写真1
                    </div>
                </div>
                <div class="item">
                    <img src="./images/guimizhizhu_2.jpg" alt="...">
                    <div class="carousel-caption">
                        写真2
                    </div>
                </div>
                <div class="item">
                    <img src="./images/jianlai_3.jpg" alt="...">
                    <div class="carousel-caption">
                        写真3
                    </div>
                </div>
                <div class="item">
                    <img src="./images/yichang_4.jpg" alt="...">
                    <div class="carousel-caption">
                        写真4
                    </div>
                </div>

            </div>

            <!-- コントロール -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">前へ</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">次へ</span>
            </a>
        </div>
</div>

。箱 {
    幅: 600ピクセル;
    高さ: 300px;
    背景色: ピンク;
    マージン: 100px 自動;
}

.カルーセル、
.carousel画像{
    幅: 100%;
    高さ: 300px !重要;
}

<スクリプト>
        $('.carousel').carousel({
            間隔: 2000
        })
</スクリプト>