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();
});
這樣，一個超酷的內容滑動效果就實現了，查看演示demo，將瀏覽器窗口放大和縮小可以看到滑動內容會隨著瀏覽器窗口自動調整大小。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
鄂公網安備 42090202000212號