BootStrap之輪播圖（collapse）總結

輪播圖collapse一共由三個主要部分組成，而這三部分需放置在一個父級div裡面。

父級程式碼結構：

<div id="carouselContainer" data-ride="carousel" class="carousel"><div>

父容器屬性說明：

id：可以隨意取一個，主要用於一下控制內容的變換

data-ride="carousel"：用於頁面一開始載入的時候就載入輪播

其他部分屬性：

data-interval="10000"：輪播時間

data-warp：輪播是否迴圈，預設為true

data-pause：滑鼠覆蓋，暫停迴圈，預設為true

第一部分：輪播中的小圓點：

如圖：

第一部分程式碼結構（小點點）：

	<!--輪播數量(小點點)-->
<ol class="carousel-indicators">
	<li class="active" data-target="#carouselContainer" data-slide-to="0">1</li>
	<li data-target="#carouselContainer" data-slide-to="1">2</li>
     <li data-target="#carouselContainer" data-slide-to="2">3</li>
	<li data-target="#carouselContainer" data-slide-to="3">4</li>
</ol>

屬性說明：

class="carousel-indicators"：指定本內容為小圓點

data-target="#carouselContainer"：指向父容器的id

data-slide-to="0"：指向內容的索引（點選li的時候，跳轉的地址）

第二部分程式碼結構（輪播內容）：

	<!--輪播內容區-->

<div class="carousel-inner" style="width: 100%;height: 100%;">
  <div class="item active">
	<a href="javascript:void(0)">
	 <img class="img-responsive" src="img/test2.jpg" />
	 </a>
	  <div class="carousel-caption">
	    <h3>阿登</h3>
	    <p>發阿東</p>
	  </div>
   </div>

  <div class="item active">
	<a href="javascript:void(0)">
	 <img class="img-responsive" src="img/test3.jpg" />
	 </a>
	  <div class="carousel-caption">
	    <h3>hello</h3>
	    <p>和*****</p>
	  </div>
   </div>

屬性說明：

class="carousel-inner"：指定本div內容為輪播內容

class=“item”：輪播子項，要輪播多少寫多少

class="carousel-caption"：輪播內容中的提示資訊

第三部分程式碼結構（左右控制）：

	<!--輪播左右控制-->
<a class="left carousel-control" href="#carouselContainer" data-slide="prev">
   <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carouselContainer" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
</a>

屬性說明：

class="left carousel-control"：左邊控制按鈕

href="#carouselContainer"：指向父容器（定位）

data-slide="prev"：上一個索引

data-slide="next"：下一個索引

class="glyphicon glyphicon-chevron-left"：左邊圖示

重寫屬性：

$(document).off(".data-api")：禁用左右控制、小圓點的索引

$("#carouselContainer").carousel()：開啟輪播

開放左右控制：

  $("#carouselContainer a.left").click(function (){
        $("#carouselContainer").carousel("prev");
    });
   $("#carouselContainer a.right").click(function (){
        $("#carouselContainer").carousel("next");
   });

監聽事件：

$("#carouselContainer").on("slide.bs.carousel",function(){
	alert("****");
	}).on("slide.bs.carousel",function(){
	alert("****");
});

概覽：

BootStrap之輪播圖（collapse）總結

相關推薦