flexslider 轮播图片
梁骞仕
FlexSlider
一个很棒的，响应能力强的jQuery滑块工具包。
- 简单的语义标记
- 所有主要浏览器均支持
- 水平/垂直滑动和淡入淡出动画
- 多个滑杆支持，回调API等
- 硬件加速的触摸滑动支持
- 自定义导航选项
- 与最新版本的jQuery兼容
通过3个简单的步骤开始使用FlexSlider！
步骤1 – 加载js、css文件
<!-- Place somewhere in the <head> of your document -->
<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>
步骤2 – 添加标记
FlexSlider标记简单明了。首先，从一个包含元素开始，在此示例中为<div class =“ flexslider”>。然后，创建一个<ul class =“ slides”>。使用此类非常重要，因为滑块专门针对该类。将图像和您想要的其他任何内容放入每个<li>中，即可开始滚动。
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
<img src="slide1.jpg" />
</li>
<li>
<img src="slide2.jpg" />
</li>
<li>
<img src="slide3.jpg" />
</li>
</ul>
</div>
步骤3 – 接通滚动块
最后，将以下几行Javascript添加到文档的<head>中，位于步骤1的链接下方。需要$（window）.load（）来确保在初始化插件之前加载页面的内容。
<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
$(window).load(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: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: false, //鼠标滑向滚动内容时，是否暂停滚动
pauseOnHover: false, //鼠标糊上去是否暂停
controlsContainer: "", //Selector: be taken.
manualControls: "", //自定义控制导航
manualControlEvent:"", //String:自定义导航控制触发事件:默认是click,可以设定hover
start: function(){}, //加载第一页触发
before: function(){}, //每个滚动动画开始时异步触发
after: function(){}, //每个滚动动画结束时触发
end: function(){} //滚动到最后一页时异步触发
});
});
</script>
参数介绍
| 属性 | 默认 | 描述 |
|---|---|---|
| namespace | “flex-” | String 前缀字符串，附加到插件生成的所有元素的类中。 |
| selector | “.slides > li” | Selector必须匹配一个简单的模式。’{container} > {slide}’。 |
| animation | “fade” | String控制动画类型"fade"或"slide"。 |
| easing | “swing” | String 确定jQuery过渡中使用的缓动方法。 |
| direction | “horizontal” | String控制动画方向，“horizontal"或"vertical” |
| reverse | false | Boolean 反转动画方向。 |
| animationLoop | true | Boolean 为滑块提供无缝的无限循环。 |
| smoothHeight | false | Boolean 平滑地动画化滑块的高度，以适应不同高度的幻灯片。 |
| startAt | 0 | Number 滑块的起始幻灯片，以数组表示法。 |
| slideshow | true | Boolean 设置幻灯片放映以使滑块自动动画。 |
| slideshowSpeed | 7000 | Number 设置幻灯片循环播放的速度，以毫秒为单位 |
| animationSpeed | 600 | Number 设置动画的速度，以毫秒为单位 |
| initDelay | 0 | Number 设置初始化延迟（以毫秒为单位） |
| randomize | false | Boolean 随机加载幻灯片顺序 |
| pauseOnAction | true | Boolean 与控件元素进行交互时，请暂停幻灯片放映。 |
| pauseOnHover | false | Boolean 将鼠标悬停在滑块上时暂停幻灯片放映，然后不再悬停时继续播放。 |
| useCSS | true | Boolean Slider将使用CSS3过渡（如果有） |
| touch | true | Boolean 允许在启用的设备上滑动滑动浏览滑块 |
| video | false | Boolean 将阻止使用CSS3 3D变换，避免出现图形故障 |
| controlNav | true | Boolean 为每个幻灯片的分页控制创建导航。 |
| customDirectionNav | “” | jQuery Object/Selector 自定义导航标记适用的容器。 |
| directionNav | true | Boolean 创建上一个/下一个箭头导航。 |
| prevText | “Previous” | String设置“上一个”directionNav项目的文本 |
| nextText | “Next” | String设置“下一个”directionNav项目的文本 |
| keyboard | true | Boolean 允许通过键盘的向左/向右键浏览滑块。 |
| multipleKeyboard | false | Boolean 允许键盘导航影响多个滑块。 |
| mousewheel | false | Boolean （相关性）允许通过鼠标滚轮浏览滑块 |
| pausePlay | false | Boolean 创建暂停/播放元素以控制滑块的幻灯片显示。 |
| pauseText | “Pause” | String设置“暂停”pausePlay项的文本 |
| playText | “Play” | String设置“播放”pausePlay项的文本 |
| controlsContainer | “” | jQuery Object/Selector 容器中应附加导航元素。 |
| manualControls | “” | jQuery Object/Selector定义用于代替动态元素的元素controlNav。 |
| sync | “” | Selector 与另一个滑块镜像在此滑块上执行的操作。 |
| asNavFor | “” | Selector 将滑块变成另一个滑块的缩略图导航。 |
| itemWidth | 0 | Number 各个轮播项目的箱型宽度，包括水平边框和填充。 |
| itemMargin | 0 | Number 轮播项目之间的保证金。 |
| minItems | 0 | Number 可见的轮播项目的最小数量。 |
| maxItems | 0 | Number 可见轮播项目的最大数量。 |
| move | 0 | Number 动画中应移动的轮播项目数。 |
| start | empty | Function 当滑块加载第一张幻灯片时触发。 |
| before | empty | Function 与每个滑块动画异步触发。 |
| after | empty | Function 在每个滑块动画完成后触发。 |
| end | empty | Function 当滑块到达最后一张幻灯片（异步）时触发。 |
| added | empty | Function 添加幻灯片后触发。 |
| removed | empty | Function 移除幻灯片后触发。 |
| rtl | false | Boolean 在滑块中支持RTL功能。 |
| isFirefox | false | Boolean 测试是否正在使用Firefox浏览器。 |
类似资料：