4.2二、Bootstrap V4自學之路-----內容---輪播

示例

<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屬性能夠輕鬆控制輪播的滑動方向。data-slide接受一個關鍵詞prev或者next,它用於改變當前滑動的方向。另外,使用data-slide-to能夠向輪播傳遞一個原生的索引。data-slide-to="2"可讓輪播把滑動位置轉到特定的索引,這個索引從0開始計數。

data-ride="carousel"屬性用來標記一個輪播在網頁載入時動畫的起點。它不能用於結合JavaScript顯式初始化同一個輪播(這樣是冗餘和沒必要要的)。

利用JavaScript

調用輪播:

$('.carousel').carousel()

選項

能夠利用data屬性或者JavaScript傳遞選項。

若是用data屬性,請把選項名追加到data-後面,好比說寫成data-interval=""

名稱 類型 默認值 描述
interval number 5000 這個時間數值用來指定兩次自動滾動之間的延遲。若是設置爲false,輪播就不會自動滾動。
pause string "hover" 當鼠標進入時中斷輪播的滾動,當鼠標離開時恢復輪播的滾動。
wrap boolean true 輪播須要持續滾動,仍是擁有一個硬停頓?
keyboard boolean true 輪播是否須要響應鍵盤事件?

方法

.carousel(options)

用一個可選的選項object初始化輪播,開始滾動幀。

$('.carousel').carousel({
   interval: 2000 
})

.carousel('cycle')

從左到右開始滾動輪播。

.carousel('pause')

中止滾動輪播。

.carousel(number)

輪播滾動到一個特定的幀(基數是0,相似於一個數組。)

.carousel("prev')

滾到前一幀

.carousel("next")

滾到下一幀。


事件

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!

相關文章
相關標籤/搜索