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滑动切换插件 参数的更多相关文章

  1. FlexSlider是一个非常出色的jQuery滑动切换插件

    FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所有初级和高级网页设计师使用.不过很多人都只是使用默认的参数,今天来说说具体的参数来给大家看看 ...

  2. jQuery图片切换插件jquery.cycle.js

    Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...

  3. 推荐几款jquery图片切换插件

    一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...

  4. jquery图片切换插件jquery.cycle.js参数详解

    转自:国人的力量 blog.163.com/xz551@126/blog/static/821257972012101541835491/ 自从使用了jquery.cycle.js,我觉得再也不用自己 ...

  5. jQuery banner切换插件

    今天学写了一个基于jQuery焦点图切换插件,有不对的地方还请多多指教,不多说下面是代码: 1.引jQuery库 <script src="http://code.jquery.com ...

  6. JQuery 移动端 上下 滑动 切换 插件 pageSlider

    HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta ...

  7. jQuery列表拖动排列-jquery list dragsort插件参数和使用方法

    在编写网页的时候,有时可能需要对ul的li进行排序,今天就给大家推荐使用jquery插件jquery list dragsort实现列表拖动排序效果. 效果如图: jquery list dragso ...

  8. 【转】jQuery列表拖动排列-jquery list dragsort插件参数和使用方法

    转自:http://www.itokit.com/2014/0820/75058.html 我们在编辑页面元素排序的时候,我推荐使用jquery插件:dragsort. dragsort官网地址:ht ...

  9. flexslider 图片轮播插件参数

    $(window).load(function() { $('.flexslider').flexslider({ animation: "fade", //String: Sel ...

随机推荐

  1. Fiddler的一些坑: !SecureClientPipeDirect failed: System.IO.IOException

    手机的请求Fiddler可以捕捉,但是手机一直无法上网,在logs中看到的日志如下: !SecureClientPipeDirect failed: System.IO.IOException 由于远 ...

  2. 自己赚钱送女友iPhone做惊喜

    都说谈恋爱是件费时费力又费钱的事情,你要给女朋友准备各种节日的惊喜,你要给女朋友买她喜欢的裙子,你要请女朋友吃各种美味的食物......但是也别抱怨,一个男人若是连自己女朋友的这点物质要求都满足不了的 ...

  3. 目标检测方法——SSD

    SSD论文阅读(Wei Liu--[ECCV2016]SSD Single Shot MultiBox Detector) 目录 作者及相关链接 文章的选择原因 方法概括 方法细节 相关背景补充 实验 ...

  4. sp_MSforeachtable 与 sp_MSforeachdb

    在MSSQL里有许多不公开的系统存储过程,其中可能常用的sp_MSforeachtable和sp_MSforeachdb有这2个.分别用于遍历某数据库的每个用户表.每个数据库. sp_MSforeac ...

  5. 很久以前写的一个 ShareRestrictedSD 类

    代码中一开始的 几个 USES 单元,可能是多余的. unit ShareRestrictedSD; interface uses Windows, Messages, SysUtils, Class ...

  6. android 官方文档 JNI TIPS

    文章地址  http://developer.android.com/training/articles/perf-jni.html JNI Tips JNI is the Java Native I ...

  7. openWrt 安装与实践 II

    1. 启动ubuntu上面的openwrt虚拟机之后, 设置一下虚拟机的网卡: 第1个网卡: Host-only 第2个网卡: NAT 2. 查看网络配置: root@OpenWrt:/etc/con ...

  8. windows系统nginx配置root绝对路径的问题

    看了下logs下面的error.log文件,发现路径有问题,修改了conf配置,把root的路径反斜杠要用两个反斜杠进行转义,再次运行正常了.

  9. 自己动手写ORM框架

    提起ORM框架,大家都很熟悉,网上流行的ORM框架有很多,其中出名的有一些,不出名的更是数不胜数. 下面是自己实现的一个简单的ORM框架,实现了常用的增删查改功能,供大家研究ORM实现原理. 功能描述 ...

  10. Kafka学习笔记-Java简单操作

    Maven依赖包: <dependency> <groupId>org.apache.kafka</groupId> <artifactId>kafka ...