jquery全屏响应式轮播图插件 flexslider

FlexSlider是由WooThemes开发的一款免费、开源的JavaScript滑动插件。 FlexSlider支持自适应布局。FlexSlider自V1.6起提供支助多个滑块，FlexSlider也增加旋转木马选项，提供了丰富的选项和配置参数，可以定制幻灯片的过渡效果、速度、自动播放等属性，以满足不同的需求。

主要js代码与解析

<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/jquery.flexslider-min.js" type="text/javascript"></script>
<script>
    $(function () {
    //初始化
        $('.flexslider').flexslider({
            directionNav: true,
            pauseOnAction: false,
        });
    });
</script>

参数说明

$(window).load(function() {
 $('.flexslider').flexslider({
 animation: "fade",    //String: 动画效果类型, fade：淡入淡出, slide：滑动 
 slideDirection: "horizontal", //String: 内容滚动方向，horizontal：水平方向和 vertical：垂直方向 
 slideshow: true,    //Boolean: 载入页面时，是否自动播放
 slideshowSpeed: 7000,   //Integer: 自动播放速度毫秒
 animationDuration: 600,   //Integer: 动画效果延时
 directionNav: true,    //Boolean: 是否显示左右方向箭头按钮 (true/false)
 controlNav: true,    //Boolean: 控制是否显示导航小圆点。可以设置为'true’（默认值）或'false'。
 keyboardNav: true,    //Boolean: 是否支持键盘方向键操作
 mousewheel: false,    //Boolean: 是否支持鼠标滚轮控制制图片滑动
 prevText: "Previous",   //String: 左方向箭头按钮显示文字
 nextText: "Next",    //String: 右方向箭头按钮显示文字
 pausePlay: false,    //Boolean: 是否创建暂停与播放按钮
 pauseText: 'Pause',    //String: 暂停按钮文字
 playText: 'Play',    //String: 播放按钮文字
 randomize: false,    //Boolean: 是否随即幻灯片顺序
 slideToStart: 0,    //Integer: 初始化第一次显示图片位置
 animationLoop: true,   //Boolean: 是否循环播放
 pauseOnAction: true,   //Boolean: 用户操作时停止自动播放
 pauseOnHover: false,   //Boolean: 悬停时是否暂停自动播放
 controlsContainer: "",   //Selector: 声明导航元素也应附加到哪个容器。默认容器是flexSlider元素。
 manualControls: "",    //Selector: 声明自定义控件导航。例如“.flex control nav li”或“#tabs nav li img”等。 
 manualControlEvent:"",   //String:自定义导航控制触发事件:默认是click,可以设定hover
 start: function(){},   //Callback: function(slider) - 滑块加载第一个滑块时回调函数
 before: function(){},   //Callback: function(slider) - 与每个滑块动画异步
 after: function(){},   //Callback: function(slider) - 每个滑块动画完成后触发
 end: function(){}    //Callback: function(slider) - 当滑块到达最后一个滑块时触发（异步）
 
 });
});