FlexSlider是一个非常出色的jQuery滑动切换插件
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滑动切换插件 参数
demo:http://www.sucaihuo.com/jquery/0/6/demo/ FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所 ...
- jQuery图片切换插件jquery.cycle.js
Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...
- 推荐几款jquery图片切换插件
一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...
- jQuery banner切换插件
今天学写了一个基于jQuery焦点图切换插件,有不对的地方还请多多指教,不多说下面是代码: 1.引jQuery库 <script src="http://code.jquery.com ...
- 一个简洁漂亮的jQuery拖放排序插件DDSort
拖放排序是WEB应用中常见的功能.虽然网上有很多别人已经造好的轮子,但是就我个人而言,没事就喜欢研究原理,自己造轮子,不管强大与否,简洁够用就是我的目标,再一个就是自己写的东西,应用起来得心应手,修改 ...
- 【新手向】一个超简单的jquery.mCustomScrollbar滚动条插件Demo
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> < ...
- JQuery 移动端 上下 滑动 切换 插件 pageSlider
HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta ...
- jquery图片切换插件jquery.cycle.js参数详解
转自:国人的力量 blog.163.com/xz551@126/blog/static/821257972012101541835491/ 自从使用了jquery.cycle.js,我觉得再也不用自己 ...
- jquery简单切换插件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
随机推荐
- 拉姆达表达式(Lambda Expressions)
上面两种写法是一样的 ,拉姆达表达式也是一种委托, 但引用的是匿名方法
- Java性能漫谈-数组复制之System.arraycopy
当我还年幼的时候,我很任性,复制数组也是,写一个for循环,来回倒腾,后来长大了,就发现了System.arraycopy的好处. 为了测试俩者的区别我写了一个简单赋值int[100000]的程序来对 ...
- IOS 代码管理工具
代码管理工具国内主要用的是SVN 国外主要是Git
- Shiro 权限框架使用总结
我们首先了解下什么是shiro ,Shiro 是 JAVA 世界中新近出现的权限框架,较之 JAAS 和 Spring Security,Shiro 在保持强大功能的同时,还在简单性和灵活性方面拥有巨 ...
- C++中的int和short int
#include <iostream> #include <string> #include <cstring> //strcpy #include <cst ...
- CSS注意事项
1.定义样式不能就加:隔开 当有定义的css样式并没有起作用的时候看看定义该样式前边有没有加“;”的如 p{};div{}
- django web 中添加超链接
django web 中添加不传参的超链接的方法如下: html: 在web中的超链接中加入一下url <a href="{% url 'app_name.views.url_func ...
- Sherlock and Squares
//Link https://www.hackerrank.com/challenges/sherlock-and-squares from math import sqrt # 用什么,引什么,减少 ...
- 列表:一个打了激素的数组2 - 零基础入门学习Python011
列表:一个打了激素的数组2 让编程改变世界 Change the world by program 从列表中获取元素 跟数组一样,我们可以通过元素的索引值(index)从列表获取单个元素,注意,列表索 ...
- 微软官方的Unity支持组件
https://unity.codeplex.com/ http://www.nuget.org/packages/Unity.Interception/ http://www.nuget.org/p ...