关于FlexSlider插件
Flexslider选项设置
$(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(){} //滚动到最后一页时异步触发
});
});
关于FlexSlider插件的更多相关文章
- FlexSlider插件的详细设置参数 http://www.woothemes.com/flexslider/
http://www.woothemes.com/flexslider/ FlexSlider插件的详细设置参数 $(window).load(function() { $('.flexslider' ...
- FlexSlider插件的详细设置参数
FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所有初级和高级网页设计师使用.不过很多人都只是使用默认的参数,今天来说说具体的参数来给大家看看 ...
- Flexslider插件实现图片轮播、文字图片相结合滑动切换效果
插件下载: 点击下载 密码: fbeg Flexslider具有以下特性: 支持滑动和淡入淡出效果. 支持水平.垂直方向滑动. 支持键盘方向键控制. 支持触控滑动. 支持图文混排,支持各种html元素 ...
- FlexSlider插件的详细设置参数 http://www.woothemes.com/flexslider/ -----幻灯片插件
$(window).load(function() { $('.flexslider').flexslider({ namespace: 'flex-', //控件的命名空间,会影响样式前缀 anim ...
- Flexslider图片轮播、文字图片相结合滑动切换效果
Flexslider是一款基于的jQuery内容滚动插件.它能让你轻松的创建内容滚动的效果,具有非常高的可定制性.开发者可以使用Flexslider轻松创建各种图片轮播效果.焦点图效果.图文混排滚动效 ...
- 常用JQUERY插件大全
jQuery内容滚动插件-BoxSlider jQuery artDialog对话框插件 移动端日期选择组件 图像延迟加载库Echo.js 轮播图FlexSlider插件 Slick.js幻灯片使用方 ...
- 对于 Web 开发很有用的 jQuery 效果制作教程
如果你的项目中需要响应式滑块,炫丽的图片呈现,对话框提示,轻巧动画等效果,jQuery 是完美的解决方案.凭借这个快速,易用的 JavaScript 库,可以轻松处理语言之间的交互,它给人最快速的 W ...
- js 动画效果实现
1. 实现方式 - 应用场景 自己写 - 简单的.不用 jq 的项目 jq - 普通动画 成熟插件 - 复杂动画 2. 相关文章 JavaScript基于时间的动画算法 九种原生js动画效果 Twee ...
- Flex slider使用方法
1.首先在页面head部位载入jquery库文件和Flexslider插件,以及Flexslider所需的基本css样式文件. <link rel="stylesheet" ...
随机推荐
- 【Java】数组不能通过toString方法转为字符串
java里,所有的类,不管是java库里面的类,或者是你自己创建的类,全部是从object这个类继承的.object里有一个方法就是toString(),那么所有的类创建的时候,都有一个toStrin ...
- 第三部分:Android 应用程序接口指南---第二节:UI---第三章 菜单
第3章 菜单 在许多不同类型的应用中,菜单通常是一种用户界面组件.为了提供给用户提供熟悉且一致的体验,你需要使用菜单API来展示用户动作和你Activity中的其他选项. 从安卓3.0系统(API l ...
- 译: 1. RabbitMQ Spring AMQP 之 Hello World
本文是译文,原文请访问:http://www.rabbitmq.com/tutorials/tutorial-one-spring-amqp.html RabbitMQ 是一个Brocker (消息队 ...
- GDB 调试器使用手冊
使用GDB: 本文描写叙述GDB,GNU的原代码调试器. (这是4.12版1994年一月.GDB版本号4.16) * 文件夹: * 摘要: GDB的摘要 * 实例: 一个使用实例 * 入门: 进入和退 ...
- [DIOCP视频]-DIOCPFileServer视频
本次视频简单讲解了DiocpFileServer + 客户端使用接口方式,通信方面可以方便的在DiocpBlockTcpClient和IdTcpClient组件之间切换. + 添加单独的EXE客户端( ...
- 阿里巴巴CI:CD之分层自动化实践之路
阿里巴巴CI:CD之分层自动化实践之路 2018-05-30 摘自:阿里巴巴CI:CD之分层自动化实践之路 目录 1 自动化 1.1 为什么要做自动化? 1.2 自动化的烦恼 1.3 自动化的追 ...
- 全面理解Java内存模型(JMM)
理解Java内存区域与Java内存模型Java内存区域 Java虚拟机在运行程序时会把其自动管理的内存划分为以上几个区域,每个区域都有的用途以及创建销毁的时机,其中蓝色部分代表的是所有线程共享的数据区 ...
- Java知多少(65)线程的挂起、恢复和终止
有时,线程的挂起是很有用的.例如,一个独立的线程可以用来显示当日的时间.如果用户不希望用时钟,线程被挂起.在任何情形下,挂起线程是很简单的,一旦挂起,重新启动线程也是一件简单的事. 挂起,终止和恢复线 ...
- Go语言_range(范围)理解
一.Go语言中的range Go 语言中 range 关键字用于 for循环中迭代数组(array).切片(slice).链表(channel)或集合(map)的元素: 在数组和切片中它返回元素的索引 ...
- Go的微服务库kite
Kite Kite是用Go开发的一套RPC库,很适合作为分布式微服务的开发框架. Kite 的传输层使用 SockJS 提供的WebSocket服务, 浏览器Javascript也可以连接到Kite上 ...