<video id="h99qi"><ins id="h99qi"><span id="h99qi"></span></ins></video>

        <var id="h99qi"><td id="h99qi"></td></var>
        1. <acronym id="h99qi"></acronym>
          <wbr id="h99qi"><code id="h99qi"><span id="h99qi"></span></code></wbr>

          1. <var id="h99qi"><th id="h99qi"></th></var>
            0712-2888027 189-8648-0214
            微信公眾號

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

            當前位置:主頁 > 技術支持 > Javascript/JQuery > JQuery flexSlider響應式圖片輪播插件

            JQuery flexSlider響應式圖片輪播插件

            時間:2024-05-14來源:風信官網 點擊: 1069次

            Flexslider是一款基于的jQuery內容滾動插件。它能讓你輕松的創建內容滾動的效果,具有非常高的可定制性。開發者可以使用Flexslider輕松創建各種圖片輪播效果、焦點圖效果、圖文混排滾動效果。

            源代碼下載地址:https://github.com/woothemes/FlexSlider/zipball/master

            更多使用示例演示地址:http://flexslider.woothemes.com/index.html

            Flexslider具有以下特性:

            支持滑動和淡入淡出效果。
            支持水平、垂直方向滑動。
            支持鍵盤方向鍵控制。
            支持觸控滑動。
            支持圖文混排,支持各種html元素。
            自適應屏幕尺寸。
            可控制滑動單元個數。
            更多選項設置和回調函數。
             

            引入flexslider.css和jquery.flexslider-min.js文件

            <link rel="stylesheet" href="../../common/css/flexslider.css" />
            <script type="text/javascript" src="../../common/js/jquery.flexslider-min.js"></script>

            HTML代碼結構:

            <!-- Place somewhere in the <body> of your page -->
            <div class="flexslider">
              <ul class="slides">
                <li>
                  <img src="slide1.jpg" />
                </li>
                <li>
                  <img src="slide2.jpg" />
                </li>
                <li>
                  <img src="slide3.jpg" />
                </li>
                <li>
                  <img src="slide4.jpg" />
                </li>
              </ul>
            </div>

            JQuery代碼結構:

            // Can also be used with $(document).ready()
            $(window).load(function() {
              $('.flexslider').flexslider({
                animation: "slide"
              });
            });


            Flexslider選項設置

            參數 描述 默認值
            animation 動畫效果類型,有"fade":淡入淡出,"slide":滑動 "fade"
            easing 內容切換時緩動效果,需要jquery easing插件支持 "swing"
            direction 內容滾動方向,有"horizontal":水平方向 和"vertical":垂直方向 "horizontal"
            animationLoop 是否循環滾動 true
            startAt 初始滑動時的起始位置,定位從第幾個開始滑動 0
            slideshow 是否自動滑動 true
            slideshowSpeed 滑動內容展示時間(ms) 7000
            animationSpeed 內容切換時間(ms) 600
            initDelay 初始化時延時時間 0
            pauseOnHover 鼠標滑向滾動內容時,是否暫停滾動 false
            touch 是否支持觸摸滑動 true
            directionNav 是否顯示左右方向箭頭按鈕 true
            keyboard 是否支持鍵盤方向鍵操作 true
            minItems 一次最少展示滑動內容的單元個數 1
            maxItems 一次最多展示滑動內容的單元個數 0
            move 一次滑動的單元個數 0
            回調函數 start: function(){},
                       before: function(){},
                       after: function(){},
                       end: function(){},
                       added: function(){},
                       removed: function(){},
                       init: function(){},
            -

             

            欄目列表
            推薦內容
            熱點內容
            展開
            亚洲精品在线视频_18禁无码毛片精品久久久久久_精品熟妇无码av免费久久_午夜福利片