插件下載：

　　點擊下載 密碼: fbeg

Flexslider具有以下特性：

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

HTML代碼：

<link rel="stylesheet" type="text/css" href="flexslider.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.flexslider-min.js"></script>

<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元素，包括圖片和文字。

JavaScript代碼：

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

　　運行一下試試咯~

Flexslider部分參數設置：

　　參考原文：https://www.helloweba.net/javascript/265.html

　　Flexslider官網：http://www.woothemes.com/flexslider

Flexslider插件實現圖片輪播、文字圖片相結合滑動切換效果