欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

全面解析Bootstrap中Carousel輪播的使用方法

 更新時間:2016年06月13日 08:41:33   作者:小龍女先生  
這篇文章主要為大家詳細的介紹了Bootstrap中Carousel的使用方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

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

源碼文件:

Carousel.scss
Carousel.js

實現(xiàn)原理:

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

源碼分析:

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

    3.1.8、實現(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%;
}

如果大家還想深入學習,可以點擊這里進行學習,再為大家附3個精彩的專題:

Bootstrap學習教程

Bootstrap實戰(zhàn)教程

Bootstrap插件使用教程

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

以上就是本文的全部內(nèi)容,希望對大家學習javascript程序設(shè)計有所幫助。

相關(guān)文章

最新評論