image.png

一般模式
1首先要設(shè)置一個(gè)輪播圖片的容器,記得設(shè)上id。

<div id="myCarousel" class="carousel slide"></div>

2.設(shè)計(jì)輪播圖片計(jì)數(shù)器。
也就是輪播下面的這個(gè)小點(diǎn)

image.png

三個(gè)點(diǎn)分別對(duì)應(yīng)123.用data-slide-to參數(shù)進(jìn)行控制。
data-targe參數(shù)照抄，data-slide-to="2" 將把滑塊移動(dòng)到一個(gè)特定的索引，索引從 0 開始計(jì)數(shù)。

<ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
</ol>   

3.設(shè)計(jì)圖片輪播區(qū)，這個(gè)區(qū)域用來(lái)放置圖片。
把圖片放置在class="carousel-inner"的div區(qū)域中。
然后每個(gè)圖片放在class="item"的div區(qū)域。

<div class="carousel-inner">
        <div class="item active">
            ![](1.jpg)
        </div>
        <div class="item">
            ![](2.jpg)
        </div>
        <div class="item">
            ![](3.jpg)
        </div>
    </div>

最終

<div id="myCarousel" class="carousel slide">
    <!-- 輪播（Carousel）指標(biāo) -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>   
    <!-- 輪播（Carousel）項(xiàng)目 -->
    <div class="carousel-inner">
        <div class="item active">
            ![](1.jpg)
        </div>
        <div class="item">
            ![](2.jpg)
        </div>
        <div class="item">
            ![](3.jpg)
        </div>
    </div>

</div> 

設(shè)置輪播標(biāo)題

這個(gè)如果需要，也可以設(shè)置，如圖

image.png

        <div class="item">
            ![](2.jpg)
            <div class="carousel-caption">標(biāo)題 2</div>
        </div>

設(shè)置輪播導(dǎo)航

什么是導(dǎo)航？

image.png

如下

    <a class="carousel-control left" href="#myCarousel" 
       data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" 
       data-slide="next">&rsaquo;</a>

設(shè)置輪播自動(dòng)播放

此時(shí)需要jquery出售了。interval: 設(shè)置自動(dòng)播放間隔時(shí)間

<script>
    $(document).ready(function() {
    $('.carousel').carousel({
     interval: 30
    })
    });
</script>

綜上

<div id="myCarousel" class="carousel slide" data-interval="2">
    <!-- 輪播（Carousel）指標(biāo) -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0"  class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1" ></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>   
    <!-- 輪播（Carousel）項(xiàng)目 -->
    <div class="carousel-inner">
        <div class="item active">
            ![](1.jpg)
            <div class="carousel-caption">標(biāo)題 1</div>
        </div>
        <div class="item">
            ![](2.jpg)
            <div class="carousel-caption">標(biāo)題 2</div>
        </div>
        <div class="item">
            ![](3.jpg)
            <div class="carousel-caption">標(biāo)題 3</div>
        </div>
    </div>
    <!-- 輪播（Carousel）導(dǎo)航 -->
    <a class="carousel-control left" href="#myCarousel" 
       data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" 
       data-slide="next">&rsaquo;</a>
</div> 

<script>
    $(document).ready(function() {
    $('.carousel').carousel({
     interval: 30
    })
    });
</script>

參考

全面解析Bootstrap圖片輪播效果javascript技巧腳本之家