<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="3"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img data-src="holder.js/600x300?theme=sky" alt="First slide"> </div> <div class="carousel-item"> <img data-src="holder.js/600x300?bg=#666" alt="Second slide"> </div> <div class="carousel-item"> <img data-src="holder.js/600x300?bg=#999" alt="Third slide"> </div> <div class="carousel-item"> <img data-src="holder.js/600x300bg=#333" alt="4 slide"> </div> </div> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="icon-prev" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="icon-next" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
僞代碼一下,看看結構。javascript
《div id="carousel-example-generic" class="carousel slide" data-ride="carousel"》
--| 《ol class="carousel-indicators"》 這裏是中下處的小圓點。點擊能夠切換
--| --| 《li data-target="#carousel-example-generic" data-slide-to="0"》 這裏是每一個小點的指向。
--| --| 《li data-target="#carousel-example-generic" data-slide-to="1"》 這裏是每一個小點的指向。
--| --| 《li data-target="#carousel-example-generic" data-slide-to="2"》 這裏是每一個小點的指向。
--| --| 《li data-target="#carousel-example-generic" data-slide-to="3"》 這裏是每一個小點的指向。
--| 《div class="carousel-inner" role="listbox"》 這裏是圖片盒子,listbox
--| --|《div class="carousel-item active"》 注意這裏是激活狀態。
--| --| --| 《img》 這裏是圖片0
--| --|《div class="carousel-item"》 這裏是存放圖片的div
--| --| --| 《img》 這裏是圖片1
--| --|《div class="carousel-item"》 這裏是存放圖片的div
--| --| --| 《img》 這裏是圖片2
--| --|《div class="carousel-item"》 這裏是存放圖片的div
--| --| --| 《img》 這裏是圖片3
--| 《a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"》這裏是prev按鈕。
--| --| 《span class="icon-prev" aria-hidden="true"》 這裏加載圖片-箭頭左
--| --| 《span class="sr-only"》 這裏是輔助設備使用說明。我很喜歡這個。
--| 《a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"》這裏是prev按鈕。
--| --| 《span class="icon-next" aria-hidden="true"》 這裏加載圖片-箭頭左
--| --| 《span class="sr-only"》 這裏是輔助設備使用說明。我很喜歡這個。
java
PS:若是使用圖片處沒有寫 .active類。則輪播框不會出現。數組
PS:出存在兩個 .active類。那以下圖所示,控件按鈕將會發生混亂。ide
第一個能夠控制,第二個只能本身輪播。
函數
過渡動畫在IE 9中不受支持。動畫
須要初始化活躍的元素。須要給其中滑塊中的一個添加.active
類。不然,輪播將不可見。spa
PS:這個功能有一個bug,就是當第一頁是時,中下部的翻頁圓點不高亮。對於處女座的我感受有點撓心。
插件
在任何的.carousel-item
元素上均可以輕鬆的經過使用.carousel-caption
來給你的幻燈片加上說明文字。在那裏面加上任何可選的 HTML,都將自動對齊和格式化。code
<div class="carousel-item active"> <img data-src="holder.js/600x300?theme=sky" alt="First slide"> <div class="carousel-caption"> <h4>標題~</h4> <p>內容!!!<br>1</p> <p>內容!!!<br>1</p> </div> </div>
僞代碼:其實看一下,就是在. carousel-item中加入了一個<div class=carousel-caption>使這個div浮在窗體上方。
對象
<div class="carousel-item"> <img src="..." alt="..."> <div class="carousel-caption"> <h3>...</h3> <p>...</p> </div> </div>
輪播組件一般與易用性原則並不衝突。若是你須要被約束的輪播,把請考慮用別的選項呈現你的內容。
這裏理解是,若是想要使用超出BS自帶這個輪播組件的功能,加本身添添改改。
若是出了問題解決不了,就另請高明,加載別的插件吧。
輪播要求在最外層的容器(即該.carousel
)中用一個id
,來讓輪播控件正常工做。若是添加多個輪播,或者修改了一個輪播的id
,請務必要更新相關的控件。
根據多個不一樣的#id控制多個輪播組件同時工做。
使用data屬性能夠輕鬆控制輪播的滑動方向。data-slide
接受一個關鍵詞prev
或者next
,它用於改變當前滑動的方向。另外,使用data-slide-to
能夠向輪播傳遞一個原生的索引。data-slide-to="2"
可讓輪播把滑動位置轉到特定的索引,這個索引從0開始計數。
data-ride="carousel"
屬性用來標記一個輪播在網頁載入時動畫的起點。它不能用於結合JavaScript顯式初始化同一個輪播(這樣是冗餘和沒必要要的)。
調用輪播:
$('.carousel').carousel()
能夠利用data屬性或者JavaScript傳遞選項。
若是用data屬性,請把選項名追加到data-
後面,好比說寫成data-interval=""
。
名稱 | 類型 | 默認值 | 描述 |
---|---|---|---|
interval | number | 5000 | 這個時間數值用來指定兩次自動滾動之間的延遲。若是設置爲false,輪播就不會自動滾動。 |
pause | string | "hover" | 當鼠標進入時中斷輪播的滾動,當鼠標離開時恢復輪播的滾動。 |
wrap | boolean | true | 輪播須要持續滾動,仍是擁有一個硬停頓? |
keyboard | boolean | true | 輪播是否須要響應鍵盤事件? |
用一個可選的選項object
初始化輪播,開始滾動幀。
$('.carousel').carousel({ interval: 2000 })
從左到右開始滾動輪播。
中止滾動輪播。
輪播滾動到一個特定的幀(基數是0,相似於一個數組。)
滾到前一幀
滾到下一幀。
Bootstrap的輪播類插件爲輪播相關的回調函數提供了事件接口。這些事件都有下面的額外的屬性:
direction
: 方向:輪播滑動的方向(能夠是 "left"
或者"right"
)。
relatedTarget
: 滑動到中間位置的DOM對象,即激活項。
全部的輪播事件在輪播自身上觸發(即,在<div>
上面觸發)。
事件類型 | 描述 |
---|---|
slide.bs.carousel | 在調用slide 行爲的時候,會當即觸發該事件。 |
slid.bs.carousel | 在滑動過渡完成的時候會觸發該事件。 |
$('#myCarousel').on('slide.bs.carousel', function () { // do something… })
這裏研究到如今發現的解決辦法。先上例子
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval=""> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="3"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img data-src="holder.js/600x300?theme=sky" alt="First slide"> <div class="carousel-caption"> <h4>標題~</h4> <p>內容!!!<br>1</p> <p>內容!!!<br>1</p> </div> </div> <div class="carousel-item"> <img data-src="holder.js/600x300?bg=#666" alt="Second slide"> </div> <div class="carousel-item"> <img data-src="holder.js/600x300?bg=#999" alt="Third slide"> </div> <div class="carousel-item"> <img data-src="holder.js/600x300bg=#333" alt="4 slide"> </div> </div> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="icon-prev" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="icon-next" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
<button type="button" onclick="text()">ddd </button> <script type="text/javascript"> function text(){ $('#carousel-example-generic').carousel({interval:500}); $('#carousel-example-generic').carousel('next'); $('#carousel-example-generic').carousel(); } </script>
將代碼分爲兩段:第一段是輪播框。在輪播框的最外層加入屬性data-interval=""後,使用下面的語句,生效。
$('#carousel-example-generic').carousel({interval:500});
PS:這裏有一個問題,當給最外層設置data-interval=空時。輪播頁面是不滾動的。
按下按鈕ddd時,纔給賦值。這裏摘錄一段話,以前一直忽略的。
能夠利用data屬性或者JavaScript傳遞選項。若是用data屬性,請把選項名追加到data-
後面,好比說寫成data-interval=""
。
應對這個問題,能夠考慮輪播組件若是自定義的話,添加初始賦值的方式。
PS:使用.carousel("prev"),無需添加data-*。
但一樣的方法對"cycle"無效,我很費解。mark!