flexslider.js制作轮播图效果

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

主要js代码与解析

<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/flexslider.js"></script>
<script>
    $(function () {
        //初始化
        $(".flexslider").flexslider();
    })
</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) - 当滑块到达最后一个滑块时触发（异步）
  
 });
});