Flexslider.js 特性：

支持滑动和淡入淡出效果。
支持水平、垂直方向滑动。
支持键盘方向键控制。
支持触控滑动。
支持图文混排，支持各种html元素。
自适应屏幕尺寸。
可控制滑动单元个数。
更多选项设置和回调函数。

引入js

<script src="jquery.min.js"></script>
<script src="jquery.flexslider-min.js"></script>

使用了.flexslider来包括所有需要滚动的内容元素，然后使用<ul class="slides">这个class非常关键，内部的滚动内容都是针对.slides的，然后在<li>内部加入任意html元素，包括图片和文字。

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>

script

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

参数详解

$(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: 在与控制元素交互时暂停幻灯片放映，建议开启.
 pauseOnHover: false, //鼠标滑向滚动内容时，是否暂停滚动
 pauseOnHover: false, //鼠标糊上去是否暂停
 controlsContainer: "", //Selector: be taken.
 manualControls: "", //自定义控制导航
 manualControlEvent:"", //String:自定义导航控制触发事件:默认是click,可以设定hover
 start: function(){}, //加载第一页触发
 before: function(){}, //每个滚动动画开始时异步触发
 after: function(){}, //每个滚动动画结束时触发
 end: function(){} //滚动到最后一页时异步触发
 
 });
});