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滑动切换插件 参数

    demo:http://www.sucaihuo.com/jquery/0/6/demo/ FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所 ...

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

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

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

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

  4. jQuery banner切换插件

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

  5. 一个简洁漂亮的jQuery拖放排序插件DDSort

    拖放排序是WEB应用中常见的功能.虽然网上有很多别人已经造好的轮子,但是就我个人而言,没事就喜欢研究原理,自己造轮子,不管强大与否,简洁够用就是我的目标,再一个就是自己写的东西,应用起来得心应手,修改 ...

  6. 【新手向】一个超简单的jquery.mCustomScrollbar滚动条插件Demo

    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> < ...

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

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

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

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

  9. jquery简单切换插件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

随机推荐

  1. css重点

    1.CSS的盒子模型? (1)两种, IE 盒子模型.标准 W3C 盒子模型:IE 的content部分包含了 border 和 pading; (2)盒模型: 内容(content).填充(padd ...

  2. http断点续传原理

    断点续传一是断点,一续传. 断点是在下载时,将下载文件分多片,同时进行多片一起下载,如果任务被暂停,暂停的位置就是断点. 续传就是未完成的下载再次开始时,会从上次的断点继续传送. 在下载(或上传)过程 ...

  3. linux 虚拟机centos64位_6.5+VM10 主机是固定IP局域网设置代理上网,虚机设置固定ip 图文详细步骤

    一种: 虚机是Desktop 安装 1.虚拟机—设置—网络适配器子选项—选择“桥接模式” 2.在虚拟机中选择系统(System)—首选项(Preferences)—网络连接(Network Conne ...

  4. .net后台 Silverlight 页面 动态设置 ASPX 页面 控件的Margin值(位置设置)

    silverlight后台代码:using System.Windows.Browser;public Page1(){HtmlPage.RegisterScriptableObject(" ...

  5. 在App中混合HTML5开发App如何实现的。在App中使用HTML5的优缺点是什么?

    参考答案: 在iOS中,通常是通常UIWebView来实现,当然在iOS8以后可以使用WKWebView来实现.有以下几种实现方法: 通过实现UIWebView的代理方法来拦截,判断scheme是否是 ...

  6. pair/sort/find/qsort

    1. pair template <class T1, class T2> struct pair { typedef T1 first_type; typedef T2 second_t ...

  7. push方法的页面间跳转--

    一,自定义动画写push方法-- 添加coreGraphics.framework框架 在CATransitionAnimation.h文件里面引入-- #import <QuartzCore/ ...

  8. ashx中session的使用

    在平常的页面上是用是很容易就的到request,response对像,从而对其进行一些操作,但在ashx(一般处理程序)中却是有一点的不同, 在ashx你无法正常的使用session,即 contex ...

  9. C++ 使用cl命令编辑时发生的问题收录

    1.cl不是内部或这外部命令,也不是可运行的程序或批处理文件. 这个问题的出现的原因是因为系统找不到cl命令处理程序,无法识别,解决办法: 首先在C盘查找cl.exe,可能会查到多个,先选择第一个,将 ...

  10. php的一些小笔记-文件函数(3)

    文件的写入和读取 1 . 文件的读取 1, file_get_contents 函数是用来将文件的内容读入到一个字符串中的首选方法    结果