1. <track id="w0gxx"><strike id="w0gxx"><menu id="w0gxx"></menu></strike></track>
      2. 0712-2888027 189-8648-0214
        微信公眾號

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

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

        JQuery響應式內容滑動插件bxSlider

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

        欄目列表
        推薦內容
        熱點內容
        展開
        久久99精品久久久久久久不卡_日本一区二区三不卡高清区免费_久久精品无码免费观看_麻豆av一区二区无码