Flexslider轮播器插件

Flexslider是一款基于的jQuery内容滚动插件。它能让你轻松的创建内容滚动的效果，具有非常高的可定制性。开发者可以使用Flexslider轻松创建各种图片轮播效果、焦点图效果、图文混排滚动效果。

 

 

 

    查看演示    下载源码

 

Flexslider具有以下特性：

• 支持滑动和淡入淡出效果。

• 支持水平、垂直方向滑动。

• 支持键盘方向键控制。

• 支持触控滑动。

• 支持图文混排，支持各种html元素。

• 自适应屏幕尺寸。

• 可控制滑动单元个数。

• 更多选项设置和回调函数。

HTML

首先在页面head部位载入jquery库文件和Flexslider插件，以及Flexslider所需的基本css样式文件。

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

然后在body中加入以下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> 

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

jQuery

调用Flexslider插件非常简单，使用如下代码：

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

然后预览网页效果，一个内容切换效果就完成了，当然想要更多个性化设置，flexslider提供了丰富的选项配置以及回调函数绝对可以满足大多数开发者需求。

Flexslider选项设置

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

FlexSlider插件的详细设置参数： $(window).load(function() {     $('.flexslider').flexslider({           namespace: 'flex-',    //控件的命名空间，会影响样式前缀          animation: "slide", //String: Select your animation type, "fade" or "slide"图片变换方式：淡入淡出或者滑动         slideDirection: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical"图片设置为滑动式时的滑动方向：左右或者上下                 selector: '.thumbnails .thumbnail',         slideshowSpeed: 5000, // 自动播放速度毫秒         animationSpeed: 600, //滚动效果播放时长         pausePlay: false,//是否显示播放暂停按钮         minItems: common.globals.SCREEN.ITEM,//最少显示多少项         itemWidth: 220,//一个滚动项目的宽度         itemMargin: 20,//滚动项目之间的间距         slideshow: true, //Boolean: Animate slider automatically 载入页面时，是否自动播放         animationDuration: 600, //Integer: S动画淡入淡出效果延时         directionNav: true, //Boolean:  (true/false)是否显示左右控制按钮         controlNav: true, //Boolean:  usage是否显示控制菜单//什么是控制菜单？         keyboardNav: true, //Boolean:left/right keys键盘左右方向键控制图片滑动         mousewheel: false, //Boolean: mousewheel鼠标滚轮控制制图片滑动         prevText: "Previous", //String: 上一项的文字         nextText: "Next", //String: 下一项的文字         pauseText: 'Pause', //String: 暂停文字         playText: 'Play', //String: 播放文字         randomize: false, //Boolean: Randomize slide order 是否随机幻灯片         slideToStart: 0, //Integer:  (0 = first slide)初始化第一次显示图片位置         animationLoop: true, //  "disable" classes at either end 是否循环滚动 循环播放         pauseOnAction: true, //Boolean:  highly recommended.         pauseOnHover: false, //Boolean: ng         controlsContainer: "", //Selector:  be taken.         manualControls: ".js-slidernav i", //Selector: .自定义控制导航// 小圆点活数字标示 css 选择器                 manualControlEvent: "", //String:自定义导航控制触发事件:默认是click,可以设定hover         start: function() {}, //Callback: function(slider) - Fires when the slider loads the first slide         before: function() {}, //Callback: function(slider) - Fires asynchronously with each slider animation         after: function() {}, //Callback: function(slider) - Fires after each slider animation completes         end: function() {} //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)             }); });