響應式內容滑動外掛程式bxSlider

標籤：android   style   blog   http   ar   io   os   使用   sp   

bxSlider特性

1.充分響應各種裝置，適應各種螢幕；

2.支援多種滑動模式，水平、垂直以及淡入淡出效果；

3.支援圖片、視頻以及任意html內容；

4.支援觸摸滑動；

5.支援Firefox，Chrome，Safari，iOS，Android，IE7+

如何使用bxSlider

1、首先是載入jQuery庫，以及bxSlider外掛程式檔案和相關CSS檔案，您可以從官方網站下載最新版本的bxSlider。

 
<link rel="stylesheet" type="text/css" href="jquery.bxslider.css"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="jquery.bxslider.min.js"></script> 

2、準備滑動內容，我們建立一個ul.bxslider，然後在其子項目li中加入滑動內容，滑動內容可以是圖片、視頻以及任意html內容：

 
<ul class="bxslider"> 
      <li><img src="images/s1.jpg" /></li> 
      <li><img src="images/s2.jpg" /></li> 
      <li><img src="images/s3.jpg" /></li> 
</ul> 

3、調用bxSlider外掛程式，當頁面內容載入完時調用bxSlider。

 
$(function(){ 
    $(‘.bxslider‘).bxSlider(); 
}); 

 

bxSlider選項設定

bxSlider提供了豐富的選項可配置，以下我們列出最主要也是最常用的選項設定。

參數	描述	預設值
mode	設定滑動模式，‘horizontal‘:水平, ‘vertical‘:垂直, ‘fade‘:淡入淡出	horizontal
speed	內容切換速度，數字，ms	500
startSlide	初始滑動位置，數字	0
randomStart	隨機初始滑動位置	true
infiniteLoop	迴圈滑動，如果設定為true時，則到最後滑動位置時會切換到初始位置	true
easing	切換動畫擴充，可以藉助jQuery Easing 動畫效果擴充設定不同的切換動畫效果	null
captions	設定顯示圖片標題，當滑動內容為圖片時並設定屬性title，可以顯示圖片標題	false
video	可使用視訊，當設定為true時，需要jquery.fitvids.js支援	false
pager	設定是否顯示分頁，設定為true時，會在滑動內容下方顯示分頁表徵圖	true
controls	設定是否顯示上一副和下一幅按鈕	true
auto	設定是否自動滑動	false
pause	自動滑動時停留時間，數字，ms	4000
autoHover	當滑鼠滑向滑動內容上時，是否暫停滑動	false

更多bxSlider的選項設定，請參照bxSlider官網：http://bxslider.com/options

響應式內容滑動外掛程式bxSlider