FlexSlider jQuery滑动切换插件 参数
demo:http://www.sucaihuo.com/jquery/0/6/demo/
FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果。适合所有初级和高级网页设计师使用。不过很多人都只是使用默认的参数,今天来说说具体的参数来给大家看看!
$(window).load(function() {
$('.flexslider').flexslider({
animation: "fade", //String: Select your animation type, "fade" or "slide"图片变换方式:淡入淡出或者滑动
slideDirection: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical"图片设置为滑动式时的滑动方向:左右或者上下
slideshow: true, //Boolean: Animate slider automatically 载入页面时,是否自动播放
slideshowSpeed: 7000, //Integer: Set the speed of the slideshow cycling, in milliseconds 自动播放速度毫秒
animationDuration: 600, //Integer: Set the speed of animations, in milliseconds动画淡入淡出效果延时
directionNav: true, //Boolean: Create navigation for previous/next navigation? (true/false)是否显示左右控制按钮
controlNav: true, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage是否显示控制菜单
keyboardNav: true, //Boolean: Allow slider navigating via keyboard left/right keys键盘左右方向键控制图片滑动
mousewheel: false, //Boolean: Allow slider navigating via mousewheel鼠标滚轮控制制图片滑动
prevText: "Previous", //String: Set the text for the "previous" directionNav item
nextText: "Next", //String: Set the text for the "next" directionNav item
pausePlay: false, //Boolean: Create pause/play dynamic element
pauseText: 'Pause', //String: Set the text for the "pause" pausePlay item
playText: 'Play', //String: Set the text for the "play" pausePlay item
randomize: false, //Boolean: Randomize slide order 是否随即幻灯片
slideToStart: 0, //Integer: The slide that the slider should start on. Array notation (0 = first slide)初始化第一次显示图片位置
animationLoop: true, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end 是否循环滚动
pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
controlsContainer: "", //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
manualControls: "", //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.自定义控制导航
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) });
});
FlexSlider jQuery滑动切换插件 参数的更多相关文章
- FlexSlider是一个非常出色的jQuery滑动切换插件
FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所有初级和高级网页设计师使用.不过很多人都只是使用默认的参数,今天来说说具体的参数来给大家看看 ...
- jQuery图片切换插件jquery.cycle.js
Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...
- 推荐几款jquery图片切换插件
一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...
- jquery图片切换插件jquery.cycle.js参数详解
转自:国人的力量 blog.163.com/xz551@126/blog/static/821257972012101541835491/ 自从使用了jquery.cycle.js,我觉得再也不用自己 ...
- jQuery banner切换插件
今天学写了一个基于jQuery焦点图切换插件,有不对的地方还请多多指教,不多说下面是代码: 1.引jQuery库 <script src="http://code.jquery.com ...
- JQuery 移动端 上下 滑动 切换 插件 pageSlider
HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta ...
- jQuery列表拖动排列-jquery list dragsort插件参数和使用方法
在编写网页的时候,有时可能需要对ul的li进行排序,今天就给大家推荐使用jquery插件jquery list dragsort实现列表拖动排序效果. 效果如图: jquery list dragso ...
- 【转】jQuery列表拖动排列-jquery list dragsort插件参数和使用方法
转自:http://www.itokit.com/2014/0820/75058.html 我们在编辑页面元素排序的时候,我推荐使用jquery插件:dragsort. dragsort官网地址:ht ...
- flexslider 图片轮播插件参数
$(window).load(function() { $('.flexslider').flexslider({ animation: "fade", //String: Sel ...
随机推荐
- Leetcode: Sequence Reconstruction
Check whether the original sequence org can be uniquely reconstructed from the sequences in seqs. Th ...
- 谈谈LoveLive SIF以及即将诞生的LL练习器
由于课程需要和自身需求以及广大的LLer的需求,这个学期我将做一个造福全世界LLer的安卓app,它的名字是——还没想好(喂),总之是个LL SIF的练习器.什么?你问我LL SIF是什么?看来你不是 ...
- ZOJ 2412 Farm Irrigation
Farm Irrigation Time Limit: 2 Seconds Memory Limit: 65536 KB Benny has a spacious farm land to ...
- Timusoj 1982. Electrification Plan
http://acm.timus.ru/problem.aspx?space=1&num=1982 1982. Electrification Plan Time limit: 0.5 sec ...
- 2.6 C#的数据转换
C#有多种数据类型,每种数据类型只能存储这种类型的变量,但又的时候我们需要各种类型之间的转换.比如在计算2+3.5的时候,这个时候有两种情况: 自动类型转换:2种不同类型的数据运算,低精度类型的数值会 ...
- chkconfig命令详解
chkconfig命令主要用来更新(启动或停止)和查询系统服务的运行级信息.谨记chkconfig不是立即自动禁止或激活一个服务,它只是简单的改变了符号连接. 使用语法:chkconfig [--ad ...
- c#常见的错误集合
1:a>b>c是不合法的,是不是合法的呢? 2 优先级是这样的:算术>关系>逻辑>三目>赋值:位运算比较乱 这句话是对是错
- WSF脚本详解:组合JS和VBS代码
1.概述 Windows Script Host除了提供一个对象模型之外,还提供了一种脚本框架,这就是WSF脚本.通过WSF约定的标记元素,可以将多种脚本语言写的代码块组合起来,完成任务.除此之外,还 ...
- Mysql复合索引
当Mysql使用索引字段作为条件时,如果该索引是复合索引,必须使用该索引中的第一个字段作为条件才能保证系统使用该索引,否则该索引不会被使用,并且应尽可能地让索引顺序和字段顺序一致
- Clouda聊天室实践
1.Clouda说明 Clouda是简单,可依赖的实时Javascript框架.对一个想开发移动webapp的开发者来说,可以使用clouda开发框架,实现一个功能和体验与native app齐平的轻 ...