1. <p id="obnf4"></p>

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

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

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

        JQuery flexSlider響應式圖片輪播插件

        時間:2024-06-22來源:風信官網 點擊: 1098次

        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(){},
        -

         

        欄目列表
        推薦內容
        熱點內容
        展開
        久久精品国产字幕|中文字幕日韩精品东京热|日韩精品动漫在线一区二|日韩免费看视频三区中文字幕
        1. <p id="obnf4"></p>