0712-2888027 189-8648-0214
微信公眾號

孝感風信網絡科技有限公司微信公眾號

當前位置:主頁 > 技術支持 > Javascript/JQuery > JQuery響應式內容滑動插件bxSlider

JQuery響應式內容滑動插件bxSlider

時間:2024-08-31來源:風信官網 點擊: 843次
響應式WEB設計可以讓WEB頁面自適應各種尺寸的屏幕,儼然已經成為了當今WEB設計趨勢。本文將介紹一款基于jQuery的響應式內容滑動插件以及如何使用這款插件到你的WEB應用中,滿足各類WEB設計需求。

bxSlider示例效果演示:http://bxslider.com/examples

bxSlider下載地址:http://bxslider.com/lib/jquery.bxslider.zip

演示效果截圖:

效果一:
JQuery響應式內容滑動插件bxSlider

效果二:
JQuery響應式內容滑動插件bxSlider

效果三:
JQuery響應式內容滑動插件bxSlider

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 當鼠標滑向滑動內容上時,是否暫?;瑒?/td> false

更多bxSlider的選項設置,請參照bxSlider官網:http://bxslider.com/options

欄目列表
推薦內容
熱點內容
展開
97人妻性爱在线精品视频,中文字幕视频一区二区,久久久久久久发综合伊人,国产一区二区三区精品日韩欧美