bxSlider示例效果演示:http://bxslider.com/examples
bxSlider下載地址:http://bxslider.com/lib/jquery.bxslider.zip
演示效果截圖:
效果一:
效果二:
效果三:
bxSlider特性
1.充分響應(yīng)各種設(shè)備,適應(yīng)各種屏幕;
2.支持多種滑動模式,水平、垂直以及淡入淡出效果;
3.支持圖片、視頻以及任意html內(nèi)容;
4.支持觸摸滑動;
5.支持Firefox,Chrome,Safari,iOS,Android,IE7+
如何使用bxSlider
1、首先是加載jQuery庫,以及bxSlider插件文件和相關(guān)CSS文件,您可以從官方網(wǎng)站下載最新版本的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、準備滑動內(nèi)容,我們創(chuàng)建一個ul.bxslider,然后在其子元素li中加入滑動內(nèi)容,滑動內(nèi)容可以是圖片、視頻以及任意html內(nèi)容:
<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、調(diào)用bxSlider插件,當頁面內(nèi)容加載完時調(diào)用bxSlider。
$(function(){
$('.bxslider').bxSlider();
});
這樣,一個超酷的內(nèi)容滑動效果就實現(xiàn)了,查看演示demo,將瀏覽器窗口放大和縮小可以看到滑動內(nèi)容會隨著瀏覽器窗口自動調(diào)整大小。bxSlider提供了豐富的配置選項,可以設(shè)置不同參數(shù)滿足各種客戶需求,來看它的選項配置。
bxSlider選項設(shè)置
bxSlider提供了豐富的選項可配置,以下我們列出最主要也是最常用的選項設(shè)置。
參數(shù) | 描述 | 默認值 |
mode | 設(shè)置滑動模式,'horizontal':水平, 'vertical':垂直, 'fade':淡入淡出 | horizontal |
speed | 內(nèi)容切換速度,數(shù)字,ms | 500 |
startSlide | 初始滑動位置,數(shù)字 | 0 |
randomStart | 隨機初始滑動位置 | true |
infiniteLoop | 循環(huán)滑動,如果設(shè)置為true時,則到最后滑動位置時會切換到初始位置 | true |
easing | 切換動畫擴展,可以借助jQuery Easing 動畫效果擴展設(shè)置不同的切換動畫效果 | null |
captions | 設(shè)置顯示圖片標題,當滑動內(nèi)容為圖片時并設(shè)置屬性title,可以顯示圖片標題 | false |
video | 支持視頻,當設(shè)置為true時,需要jquery.fitvids.js支持 | false |
pager | 設(shè)置是否顯示分頁,設(shè)置為true時,會在滑動內(nèi)容下方顯示分頁圖標 | true |
controls | 設(shè)置是否顯示上一副和下一幅按鈕 | true |
auto | 設(shè)置是否自動滑動 | false |
pause | 自動滑動時停留時間,數(shù)字,ms | 4000 |
autoHover | 當鼠標滑向滑動內(nèi)容上時,是否暫停滑動 | false |
更多bxSlider的選項設(shè)置,請參照bxSlider官網(wǎng):http://bxslider.com/options