关于jquery.flexslider-min.js插件

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="data:images/s1.jpg" /></li>         <li><img src="data:images/s2.jpg" /></li>         <li><img src="data:images/s3.jpg" /></li>         <li><img src="data:images/s4.jpg" /></li>       </ul> </div>

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

jQuery

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

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

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

Flexslider选项设置

参数	描述	默认值
animation	动画效果类型，有"fade"：淡入淡出，"slide"：滑动	"fade"
easing	内容切换时缓动效果，需要jquery easing插件支持	"swing"
direction	内容滚动方向，有"horizontal"：水平方向和"vertical"：垂直方向	"horizontal"
animationLoop	是否循环滚动	true
startAt	初始滑动时的起始位置，定位从第几个开始滑动	0
slideshow	是否自动滑动	true
slideshowSpeed	滑动内容展示时间(ms)	7000
animationSpeed	内容切换时间(ms)	600
initDelay	初始化时延时时间	0
pauseOnHover	鼠标滑向滚动内容时，是否暂停滚动	false
touch	是否支持触摸滑动	true
directionNav	是否显示左右方向箭头按钮	true
keyboard	是否支持键盘方向键操作	true
minItems	一次最少展示滑动内容的单元个数	1
maxItems	一次最多展示滑动内容的单元个数	0
move	一次滑动的单元个数	0
回调函数	start: function(){}, before: function(){}, after: function(){}, end: function(){}, added: function(){}, removed: function(){}, init: function(){},	-

更多Flexslider相关信息可以访问Flexslider官网地址：http://www.woothemes.com/flexslider/

声明：本文为转载文，helloweba.com和作者拥有版权，如需转载，请注明来源于helloweba.com并保留原文链接：http://www.helloweba.com/view-blog-265.html

关于jquery.flexslider-min.js插件相关推荐

jquery.validate.min.js 插件
1.导入js库: 注意:(在这里我导入的单单是jquery.validate.min.js,没有导入jq的其它,不要忘记哦) <script src="http://static.ru ...
jquery.fly.min.js 拋物插件
插件官方: https://github.com/amibug/fly , 官方例子: http://codepen.io/hzxs1990225/full/ogLaVp 首先加载jQuery.j ...
异步提交表单插件jquery.form.min.js的使用实例
因为项目中需要达到效果:前台点击按钮弹出文件选择框,选择文件确定之后,上传到后台对文件进行处理并给出响应信息. 尝试过使用$.post,$.ajsx,将表单序列化之后传到后台,但是后台并不能收到文件, ...
幻灯片插件-jquery.sliderPro.min.js
https://github.com/bqworks/slider-pro/blob/master/docs/modules.md#modules 使用方法在页面中引入必要的文件: <link ...
jquery.slimscroll.min.js轮动条插件
引用: <script src="js/jquery.min.js"></script> <script src="js/jquery. ...
Form表单序列化Json插件-jquery.serializejson.min.js
Form表单参数序列化成Json对象: 1. 使用serializeJsonObject 2. jquery.serializejson.min.js 1. 使用serializeJsonObject ...
利用jquery的qrcode.js插件生成二维码的两种方式的使用
2019独角兽企业重金招聘Python工程师标准>>> 利用jquery的qrcode.js插件生成二维码的额两种方式,canvas(即画布)方式和table方式(原文地址http: ...
jquery.validate.min.js使用介绍
jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方 ...
打印jQuery.print.min.js 使用总结
项目中遇到打印报表的要求,需要只打印报表部分而不是整个页面,一般直接调用系统的方法window.print(),会打印整个页面,发现jQuery.print.min.js 很好用,下面和大家分享下打印 ...
swiper.min.js插件
swiper.min.js插件实现多种滑动效果,可在pc.手机.平板中使用. 该插件官方网址:http://www.swiper.com.cn/(版本3).http://2.swiper.com.cn ...