一、插件介紹
FlexSlider是一個非常出色的jQuery滑動切換插件，它支持所有主流瀏覽器，並有淡入淡出效果。FlexSlider對於網站開發者來說是一個不錯測JQUERY特效，因為支持全瀏覽器深受中國網站前端開發者的喜愛！
二、插件圖片、DEMO及下載
1、帶有左右按鈕、小圓點兒的輪播圖
2、全屏輪播圖片
3、FlexSlider制作新浪2014成都車展幻燈片演示
三、插件作者下載地址
兼容瀏覽器：IE6+/Firefox/Google Chrome
官方鏈接：http://www.woothemes.com/flexslider/
JS下載：http://www.ijquery.cn/js/flexslider/jquery.flexslider.js
預覽： http://www.ijquery.cn/demo/flexslider
打包下載： http://www.ijquery.cn/demo/flexslider/flexslider.zip
五、最簡使用教程
JS和CSS引用代碼：
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="http://www.ijquery.cn/js/flexslider/jquery.flexslider.js"></script> <link rel="stylesheet" type="text/css" href="http://www.ijquery.cn/js/flexslider/flexslider.css" media="all" /> <script type="text/javascript" > $(function(){ $(‘.flexslider’).flexslider(); }); </script>
HTML代碼：這里一定要控制div的寬度！
<div style="width:500px;height:315px;"> <ul> <li><img src="images/slide1.jpg"/></li> <li><img src="images/slide2.jpg"/></li> <li><img src="images/slide3.jpg"/></li> </ul> </div>
五、參數說明：
| 參數 | 描述 | 默認值 |
| 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(){}, |
– |