響應式內容滑動插件jQuery.bxSlider

bxSlider特性

1.充分響應各類設備，適應各類屏幕；

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

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

4.支持觸摸滑動；

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

官方網站：http://bxslider.com/

中文說明可參考：http://www.helloweba.com/view-blog-219.html

如何使用bxSlider

一、首先是加載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> 

 二、準備滑動內容，咱們建立一個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> 

 三、調用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