全面解析Bootstrap中Carousel輪播的使用方法
本文實(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è)精彩的專題:
精彩專題分享:jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
Bootstrap輸入框組件簡(jiǎn)單實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Bootstrap輸入框組件的簡(jiǎn)單實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03解決Layui選擇全部,換頁(yè)checkbox復(fù)選框重新勾選的問(wèn)題方法
今天小編就為大家分享一篇解決Layui選擇全部,換頁(yè)checkbox復(fù)選框重新勾選的問(wèn)題方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08JavaScript動(dòng)態(tài)插入script的基本思路及實(shí)現(xiàn)函數(shù)
偶爾需要?jiǎng)討B(tài)插入javascript代碼的需求,基本思路是動(dòng)態(tài)創(chuàng)建一個(gè)script標(biāo)簽,設(shè)置其src屬性,type屬性等,需要的朋友可以參考下2013-11-11JS+CSS實(shí)現(xiàn)簡(jiǎn)易的滑動(dòng)門效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)簡(jiǎn)易的滑動(dòng)門效果代碼,涉及JavaScript動(dòng)態(tài)遍歷及修改頁(yè)面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09使用JavaScript動(dòng)態(tài)設(shè)置樣式實(shí)現(xiàn)代碼(2)
使用onmouseover和onmouseout事件實(shí)現(xiàn)不同的效果而且是使用js動(dòng)態(tài)實(shí)現(xiàn),本文有利于鞏固你js與css方面的知識(shí),感興趣的你可以了解下哦,希望本文對(duì)你有所幫助2013-01-01javascript輸入CD-KEY自動(dòng)分割的代碼
開(kāi)發(fā)過(guò)程中用寫(xiě)的一個(gè)腳本,記錄下來(lái)以備后用與他用,其中attributes["max"].nodeValue是取HTML自定義的 max屬性(兼容Firefox和IE)2010-10-10