博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
FlexSlider插件的详细设置参数
阅读量:6914 次
发布时间:2019-06-27

本文共 2058 字,大约阅读时间需要 6 分钟。

一直用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)
});
});

在实际的工作中 上述代码的$(window).load(function() {}); 可改为 $(function(){}). 性能会更高些。

转载于:https://www.cnblogs.com/snowhite/p/4952982.html

你可能感兴趣的文章
Win10杀毒软件大PK:Defender垫底 卡巴/小红伞第一
查看>>
WIFI性价比持续走高 或成物联网首选
查看>>
Linux后门入侵检测工具,附bash漏洞解决方法
查看>>
微软的这项新技术证明 深度学习还能更“深入”
查看>>
LoadRunner测试ajaxweb程序攻略
查看>>
咋办?运营商认为虚拟化难快速降低OPEX
查看>>
卧底软件:帮助公司找出“内奸”
查看>>
Loadrunner日志设置与查看
查看>>
美国两大有线电视运营商达成无线服务合作 Verizon的大麻烦来了?
查看>>
Qt之QNetworkInterface
查看>>
Sentry 8.17.0 发布,Python 实时日志平台
查看>>
深圳卓炎科技的企业网站建设实战经验分享
查看>>
通过阿里云ECS从零开始构建网站
查看>>
《开源思索集》一开放源码是开源软件吗? - 简书
查看>>
Ubuntu Touch将支持用户数据加密:目前暂无时间表
查看>>
《金蝶ERP—K/3标准财务模拟实训(11.X版)》——导读
查看>>
开发者必备:基于 Linux 生态的十大AI开源框架盘
查看>>
《基于ArcGIS的Python编程秘笈(第2版)》——2.10 更新图层的符号系统
查看>>
SAP的ABAP屏幕程序如何使用Table Control进行数据交互
查看>>
Visual Studio 将集成 Cordova 支持跨平台开发
查看>>