Bootstrap框架中 輪播（Carousel）插件是一種靈活的響應式的向站點添加滑塊的方式
輪播圖效果：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Cary_Bootstrap輪播器</title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> #myCarousel { margin: 150px 450px 150px; } </style> </head> <body> <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active" align="center"> <img src="index/11.jpg" alt="First slide"> </div> <div class="item" align="center"> <img src="index/22.jpg" alt="Second slide"> </div> <div class="item" align="center"> <img src="index/33.jpg" alt="Third slide"> </div> </div> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" ></span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" ></span> </a> </div> </body> </html>
實現過程：
樣式中用margin設置輪播器整體位置
圖片比較小，不設置整體位置會讓輪播器箭頭和圖片分隔距離太遠。
<style>
#myCarousel {
margin: 150px 450px 150px;
}
</style>
margin相關屬性
margin簡寫屬性在一個聲明中設置所有外邊距屬性。該屬性可以有1-4個值。margin的默認值是0。沒有繼承性，也就是說給父元素設置的margin值並不會自動傳遞到子元素中。
一個參數
margin: 10px;
1
所有4個外邊距都是10px
兩個參數
margin: 10px 5px;
1
上外邊距和下外邊距是10px
右外邊距和左外邊距是5px
三個參數
margin: 10px 5px 15px;
1
上外邊距是10px
右外邊距和左外邊距是5px
下外邊距是15px
四個參數
margin: 10px 5px 15px 20px;
1
上外邊距是10px
右外邊距是5px
下外邊距是15px
左外邊距是20px
設置四個外邊距的順序是上、右、下、左，請記住順時針即可。
margin屬性詳解：傳送門
一、給輪播器添加指標
<ol class="carousel-indicators"> <!--設置輪播器列表區域樣式--> <!--data-slide-to 給每張圖片設置一個指標--> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <!--class="active"設置播放當前頁面--> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol>
data-target="#myCarousel"寫在輪播器列表li標簽里，將輪播綁定輪播器區域div的id
data-slide-to="0"寫在輪播器列表li標簽里，將輪播器列表編號，默認從0開始
二、添加輪播圖片<div class="carousel-inner"> <!--設置輪播器圖片區域--> <div class="item active" align="center"> <!--設置輪播器圖片樣式、居中顯示--> <img src="index/11.jpg" alt="First slide"> </div> <div class="item" align="center"> <img src="index/22.jpg" alt="Second slide"> </div> <div class="item" align="center"> <img src="index/33.jpg" alt="Third slide"> </div> </div>
(設置圖片大小：<img style="height: height px ; width: width px">)
三、設置輪播器箭頭
data-slide 關鍵字 prev 或 next，用來改變幻燈片相對於當前位置的位置，可以用data-slide-to="2" 將把滑塊移動到一個特定的索引，索引從 0 開始計數
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" ></span> </a> <!--carousel-control輪播器箭頭樣式--> <!--href="#myCarousel"寫在輪播器箭頭a標簽里，將a標簽連接href=輪播器區域div的id--> <!--data-slide="prev"寫在輪播器箭頭a標簽里，設置箭頭左點擊事件-- <!--span標簽標glyphicon-chevron-let設置圖標自動靠左--> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" ></span> </a>
屬性名稱 類型 默認值 描述
data-interval number 5000 幻燈片輪換的等待時間（毫秒）。如果為false,輪播將不會自動開始循環
data-pause string hover 默認鼠標懸停留在幻燈片區域即停止播放，離開即開始播放
data-wrap 布爾值 true 輪播是否持續循環-->
$(function () {
$('#myCarousel').carousel({
//設置自動播放/3 秒
interval: 3000,
});
});
參考資料：菜鳥教程 Bootstrap 輪播（Carousel）插件 傳送門