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

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

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

JQuery flexSlider響應式圖片輪播插件

時間:2018-08-09來源:風信網 點擊:

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

 

欄目列表
推薦內容
熱點內容
展開
博公司乐放6fu 3d开奖号3d开奖 财神捕鱼输了几十万 北京快3 闲来麻将app 河南快三开奖结果今天的 pk10官方 1分彩稳赚技巧 东京热中文视频 炒股培训 欧冠西甲为什么5个名额 胆码追踪双码 山西快乐十分真准网 福利彩3d开奖 多多棋牌游戏 云南11选5彩票通 捷报比分篮球即时比分