一、外掛介紹
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(){}, |
– |