Flexslider是一款基于jQuery的内容滚动插件。它能让你轻松的创建内容滚动的效果，具有非常高的可定制性。开发者可以使用Flexslider轻松创建各种图片轮播效果、焦点图效果、图文混排滚动效果。
Flexslider特性
- 支持滑动和淡入淡出效果。
- 支持水平、垂直方向滑动。
- 支持键盘方向键控制。
- 支持触控滑动。
- 支持图文混排，支持各种html元素。
- 自适应屏幕尺寸。
- 可控制滑动单元个数。
- 更多选项设置和回调函数。
使用
在head标签中添加以下内容：
<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>
也可以到cdnjs中自行查找添加。
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>
html按照上面的结构来写即可，需要滚动的内容添加到li中，可添加文字即图片等，下面我们来设置js内容来自定义滚动样式。
jQuery:
调用
$(function() {
$(".flexslider").flexslider();
});
以上写法就可以实现基本的滚动，如果想要更多自定义的设置，来看下面的内容：
$(".flexslider").flexslider({
allowOneSlide: false, //只有一张图是否初始化滚动
animation: "slide", //图片变换方式：淡入淡出或者滑动"fade" or "slide"
slideDirection: "horizontal", //图片滑动时的滑动方向：左右或者上下"horizontal" or "vertical"
slideshow: true, //载入页面时，是否自动播放
slideshowSpeed: 2000, //自动播放速度毫秒
animationDuration: 600, //内容切换时间
touch: true, //是否支持触摸滑动
directionNav: true, //是否显示左右控制按钮
controlNav: true, //是否显示控制菜单
keyboardNav: true, //键盘左右方向键控制图片滑动
mousewheel: false, //鼠标滚轮控制制图片滑动
//itemsWidth: 50, //设置一个item的宽度
// minItems: 2, //一次最少展示滑动内容的单元个数
// maxItems: 2, //一次最多展示滑动内容的单元个数
// move: 1, //一次滑动的单元个数
// 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, //手动滚动内容后，是否暂停滚动
pauseOnHover: true, //鼠标悬停内容上，是否暂停滚动
// controlsContainer: "", //Selector: be taken.
// manualControls: "", //自定义控制导航
// manualControlEvent:"", //String:自定义导航控制触发事件:默认是click,可以设定hover
// start: function(){}, //加载第一页触发
// before: function(){}, //每个滚动动画开始时异步触发
// after: function(){}, //每个滚动动画结束时触发
// end: function(){} //滚动到最后一页时异步触发
});
补充
附上官方网站Flexslider