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

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

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

    JQuery響應式內容滑動插件bxSlider

    時間:2024-03-28來源:風信官網 點擊: 654次
    響應式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

    欄目列表
    推薦內容
    熱點內容
    展開
    动漫h精品无码一区二区三区,欧美日韩精品一区二区,午夜麻豆国产精品,加勒比中文字幕无码,亚洲日本va中文字幕区