第二百五十一節，Bootstrap項目實戰--響應式輪播圖

Bootstrap項目實戰--響應式輪播圖

 

學習要點：

　　1.響應式輪播圖

 

本節課我們要在導航條的下方做一張輪播圖，自動播放最新的重要動態。

 

一．響應式輪播圖

響應式輪播圖

 

第一步，設置輪播器區域
carousel樣式class類，寫在輪播器<div>里，設置輪播器區域樣式(項目實戰Bootstrap)
slide樣式class類，寫在輪播器<div>里，設置輪播器滾動樣式(項目實戰Bootstrap)

 

第二步，設置輪播器列表區域，就是小圓點區域
carousel-indicators樣式class類，寫在輪播器列表<ol>里，設置輪播器列表區域樣式，就是小圓點區域樣式(項目實戰Bootstrap)
active樣式class類，寫在輪播器列表<li>里，設置當前列表項首選(項目實戰Bootstrap)

 

第三步，設置輪播器圖片區域
carousel-inner樣式class類，寫在輪播器圖片區域<div>里，設置輪播器圖片區域(項目實戰Bootstrap)
item樣式class類，寫在輪播器圖片區域里<div>里，設置輪播器圖片樣式(項目實戰Bootstrap)
active樣式class類，寫在輪播器圖片區域里<div>里，設置輪播器當前圖片首選(項目實戰Bootstrap)

 

第四步，設置輪播器箭頭區域
carousel-control樣式class類，寫在輪播器箭頭<a>里，設置輪播器箭頭樣式(項目實戰Bootstrap)
left樣式class類，寫在輪播器箭頭<a>里，設置輪播器箭頭靠左(項目實戰Bootstrap)
right樣式class類，寫在輪播器箭頭<a>里，設置輪播器箭頭靠右(項目實戰Bootstrap)

 

第五步，事件綁定
列表綁定
data-target="#myCarousel"寫在輪播器列表li標簽里，將輪播綁定輪播器區域div的id(項目實戰Bootstrap)
data-slide-to="0"寫在輪播器列表li標簽里，將輪播器列表編號，默認從0開始(項目實戰Bootstrap)
箭頭綁定
href="#myCarousel"寫在輪播器箭頭a標簽里，將a標簽連接href=輪播器區域div的id(項目實戰Bootstrap)
data-slide="prev"寫在輪播器箭頭a標簽里，設置箭頭左點擊事件(項目實戰Bootstrap)
data-slide="next"寫在輪播器箭頭a標簽里，設置箭頭右點擊事件(項目實戰Bootstrap)

 

第六步，重寫css
1.將輪播器頭部外邊距設置成導航條的高度，使其輪播器不被導航覆蓋
2.將輪播器里的圖片img標簽外邊距方式居中
3.將圖片外層div設置成圖片漸變背景色，將所有圖片漸變處理，使其圖片與外圍div融合

 

第七步，寫js
在js文件設置輪播器自動播放，和播放間隔時間

 

第八步，重點，關於箭頭響應式自動居中問題
在箭頭a標簽里用span標簽設置圖標glyphicon-chevron-left和glyphicon-chevron-right，或自動實現箭頭響應式居中

 html

<div id="myCarousel" class="carousel slide">                        <!--設置輪播器區域樣式，設置輪播器滾動樣式-->
    <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>
    <div class="carousel-inner">                                    <!--設置輪播器圖片區域-->
        <div class="item active tp1">                                <!--設置輪播器圖片樣式-->
            <a href="#"><img src="img/1.jpg" alt="第一張"></a>
        </div>
        <div class="item tp2">
            <a href="#"><img src="img/2.jpg" alt="第二張"></a>
        </div>
        <div class="item tp3">
            <a href="#"><img src="img/3.jpg" alt="第三張"></a>
        </div>
    </div>
    <!--設置輪播器箭頭區域-->
    <a href="#myCarousel" data-slide="prev" class="carousel-control left">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a href="#myCarousel" data-slide="next" class="carousel-control right">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

css

/*輪播器--------------------------------------------------------------------------------------------------------------*/
/*將輪播器頭部外邊距設置50像素*/
#myCarousel {
    margin: 50px 0 0 0;
}
.carousel-inner .item img {
    margin: 0 auto;
}
.tp1{
    background:#ECEDF1;
}
.tp2{
    background:#88AED3;
}
.tp3{
    background:#22AEE3;
}

js

/**
 * Created by admin on 2017/5/2.
 */
$(function () {
    $('#myCarousel').carousel({
        //設置自動播放/3 秒
        interval: 3000,
    });
});