本文實(shí)例為大家全面的解析了Bootstrap中Carousel的使用方法，供大家參考，具體內(nèi)容如下

源碼文件：

Carousel.scss
Carousel.js

實(shí)現(xiàn)原理：

隱藏所有要顯示的元素，然后指定當(dāng)前要顯示的為block，寬、高自適應(yīng)

源碼分析：

 1、Html結(jié)構(gòu)：主要分為以四個(gè)部分
  1.1、容器：最外層div，需要一個(gè)data-ride=”carousel”來(lái)指定為輪播放插件，并且提供一個(gè)Id，方便圓圈指示符的關(guān)聯(lián)
  1.2、圖片列表部分，用一個(gè)外層div包裹所有，然后每個(gè)img會(huì)被一個(gè)div，則class為item的包裹住
  1.3、圓圈指示符：用一個(gè)ol列表來(lái)顯示其各圖形列表項(xiàng)，每個(gè)列表項(xiàng)需要指定data-slide-to=”index”屬性，用于標(biāo)記當(dāng)前圓圈的索引號(hào)
  1.4、左右控制按鈕：實(shí)現(xiàn)向左、向右移動(dòng)的功能
2、Css樣式
  2.1、Carousel：只有一個(gè)相對(duì)定位標(biāo)記
  2.2、Carousel-inner：旋轉(zhuǎn)圖片列表區(qū)域，其中每項(xiàng)有item來(lái)修飾
   2.2.1、其中的active、next、prev都認(rèn)為是可見(jiàn)的
   2.2.2、Carousel-caption：表示每個(gè)item項(xiàng)應(yīng)該有標(biāo)題信息，默認(rèn)顯示下、中位置
  2.3、Carousel-control：設(shè)置向左、向右按鈕的樣式，其中會(huì)設(shè)置漸變、透明度等信息，提供了icon-prev、icon-next兩種額外樣式
  2.4、Carousel-indicators：圓圈部分樣式，都是絕對(duì)定位，每個(gè)li設(shè)置為行內(nèi)塊元素，用text-indent：-999來(lái)隱藏字體
3、Js代碼
  3.1、主要核心方法為slide，他實(shí)現(xiàn)了圖片的切換
    3.1.1、在第一次進(jìn)行圖片切換的時(shí)候，都會(huì)調(diào)用pause方法來(lái)暫定定時(shí)器，在圖片切換完成后才調(diào)用cycle方法來(lái)啟用定時(shí)器
    3.1.2、接受的type和next兩個(gè)參數(shù)
      3.1.2.1、Type：表示向上、還是向下?lián)Q頁(yè)
      3.1.2.2、Next：本次要顯示為活動(dòng)的Item項(xiàng)，如果不傳入則需要通過(guò)getItemForDirection方法來(lái)獲取
    3.1.3、在獲取完成$active（當(dāng)前活動(dòng)的Item）、$next（需要成為活動(dòng)項(xiàng)的Item）、isCycling（定時(shí)輪播的定時(shí)器句柄）、direction（方向）等基本參數(shù)
    3.1.4、然后觸發(fā)slide.bs.carousel事件
    3.1.5、然后設(shè)置indicators的索引項(xiàng)
    3.1.6、切換圖片，如果支持css動(dòng)畫(huà)就用動(dòng)畫(huà)切換，否則直接加css來(lái)切換
    3.1.7、動(dòng)畫(huà)切換原理：
      3.1.7.1、Prev：是向右滾動(dòng)圖片，會(huì)組合出的樣式：active right(active項(xiàng)) prev right（下一項(xiàng)），這時(shí)prev自身為-100%，把圖片放在最左邊
      3.1.7.2、Next：是向左滾動(dòng)圖片 active left（active項(xiàng)）、next left（下一項(xiàng)），這時(shí)next自身為100%，把圖片放在最右邊
      3.1.7.3、Active right：圖片應(yīng)該是向右，那就應(yīng)該運(yùn)動(dòng)圖片寬度的100%
      3.1.7.4、Active left：圖片向左，那就應(yīng)該運(yùn)行圖片寬度的-100%
      3.1.7.5、對(duì)比圖： 

    3.1.8、實(shí)現(xiàn)代碼（不包含Css3）：  

.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
 display: block;
}
.carousel-inner > .active {
 left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
 position: absolute;
 top: 0;
 width: 100%;
}
.carousel-inner > .next {
 left: 100%;
}
.carousel-inner > .prev {
 left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
 left: 0;
}
.carousel-inner > .active.left {
 left: -100%;
}
.carousel-inner > .active.right {
 left: 100%;
}

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap插件使用教程

精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

最新評(píng)論