FlexSlider插件的詳細設置參數

Flexslider具備如下特性：

1. 支持滑動和淡入淡出效果。
2. 支持水平、垂直方向滑動。
3. 支持鍵盤方向鍵控制。
4. 支持觸控滑動。
5. 支持圖文混排，支持各類html元素。
6. 自適應屏幕尺寸。
7. 可控制滑動單元個數。
8. 更多選項設置和回調函數。

HTML

　　在head部分載入jquery庫文件和Flexslider插件，以及Flexslider所需的基本css樣式文件

<link href="//cdn.bootcss.com/flexslider/2.6.3/flexslider.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
<script src="//cdn.bootcss.com/flexslider/2.6.3/jquery.flexslider-min.js"></script>

　　而後在body中加入如下HTML代碼：

<div class="flexslider"> 
      <ul class="slides"> 
        <li><img src="images/s1.jpg" /></li> 
        <li><img src="images/s2.jpg" /></li> 
        <li><img src="images/s3.jpg" /></li> 
        <li><img src="images/s4.jpg" /></li> 
      </ul> 
</div>

　　使用了.flexslider來包括全部須要滾動的內容元素，而後使用<ul class="slides">這個class很是關鍵，內部的滾動內容都是針對.slides的，而後在<li>內部加入任意　　html元素，包括圖片和文字。

jQuery

　　調用Flexslider插件很是簡單，使用以下代碼：

$(function() { 
    $(".flexslider").flexslider(); 
}); 

　　而後預覽網頁效果，一個內容切換效果就完成了，固然想要更多個性化設置，flexslider提供了豐富的選項配置以及回調函數絕對能夠知足大多數開發者需求。

Flexslider選項設置

$(window).load(function() {
 $('.flexslider').flexslider({
  animation: "fade",              //圖片變換方式：淡入淡出或者滑動
  slideDirection: "horizontal",   //圖片設置爲滑動式時的滑動方向：左右或者上下
  slideshow: true,                //載入頁面時，是否自動播放
  slideshowSpeed: 7000,           //自動播放速度毫秒
  animationDuration: 600,         //內容切換時間
  touch:              //是否支持觸摸滑動
  directionNav: true,             //是否顯示左右控制按鈕
  controlNav: true,               //是否顯示控制菜單
  keyboardNav: true,              //鍵盤左右方向鍵控制圖片滑動
  mousewheel: false,              //鼠標滾輪控制製圖片滑動
  minItems:1                  //一次最少展現滑動內容的單元個數    
  maxItems:0                   //一次最多展現滑動內容的單元個數    
  move:0              //一次滑動的單元個數                    
  prevText: "Previous",           //String:  上一項的文字
  nextText: "Next",               //String:  下一項的文字
  pausePlay: false,               //Boolean: 是否顯示播放暫停按鈕
  pauseText: 'Pause',             //String:  暫停文字
  playText: 'Play',               //String: 播放文字
  randomize: false,               //Boolean: 是否隨機幻燈片
  slideToStart: 0,                //Integer:  初始化第一次顯示圖片位置
  animationLoop: true,            //是否循環滾動
  pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
  pauseOnHover: false,            //鼠標滑向滾動內容時，是否暫停滾動
  pauseOnHover: false,           //鼠標糊上去是否暫停
  controlsContainer: "",          //Selector:  be taken.
  manualControls: "",             //自定義控制導航
  manualControlEvent:"",          //String:自定義導航控制觸發事件:默認是click,能夠設定hover
  start: function(){},            //加載第一頁觸發
  before: function(){},           //每一個滾動動畫開始時異步觸發
  after: function(){},            //每一個滾動動畫結束時觸發
  end: function(){}               //滾動到最後一頁時異步觸發
  
 });
});

　　更多Flexslider相關信息能夠訪問Flexslider官網地址：http://www.woothemes.com/flexslider/