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 ...
随机推荐
- HTML与CSS入门——第九章 使用颜色
知识点: 1.为网站选择颜色的方法 2.颜色在Web上的工作方式 3.使用十六进制颜色值的方法 4.使用CSS设置背景.文本和边框颜色的方法 9.1 选择颜色的最佳方法: 直白地说:根据用户群体找到最 ...
- BZOJ4195 NOI2015 程序自动分析
4195: [Noi2015]程序自动分析 Time Limit: 10 Sec Memory Limit: 512 MB Description 在实现程序自动分析的过程中,常常需要判定一些约束条件 ...
- Hql 子查询
直接上代码: public virtual IList<VoucherLog> GetMaxResultVoucherLog() { string orgaizationCode = Ht ...
- JavaWeb学习笔记-使用HttpSession对象跟踪会话
使用HttpSession接口开发的步骤: 1.获取HttpSession对象 2.对HttpSession对象进行读写 3.手工终止HttpSession,或者自动终止 常用方法: getId(): ...
- .net 既可以输入又可以选择的dropdownlist
第一.<script src="../../../Common/Scripts/combox.js" type="text/javascript"> ...
- 2014年总结:我的IT路
又是一年春节时,转眼之间已经毕业4年,简单回顾一下这几年的职业生涯,希望大家提出宝贵意见. 大学时,几个同学跟着学校网络中心的老师一块做校园网上运行的小系统.偶尔协助一下老师对学校机房.校园网做一下维 ...
- hdu 1546 Idiomatic Phrases Game
http://acm.hdu.edu.cn/showproblem.php?pid=1546 #include <cstdio> #include <iostream> #in ...
- HDU 4276 The Ghost Blows Light(树形)
题意:给出一棵n个节点的树,起点1,终点n,相连的两个节点之间有距离,每个节点有个价值,给出一个时间T.问从1到达n在给定时间T内取得的最大价值? 思路:先从1走到n,如果总的时间不够走完,直接退出, ...
- 实用的VIM配置文件
VIM配置文件名为.vimrc,默认在用户根目录下,或者在命令模式下输入:version可以获取配置文件路径. 在VIM命令行下输入options,然后回车,可以查看VIM所有的参数选项. 双引号&q ...
- 瑞柏匡丞:app商业价值如何体现
在互联网行业,想要实现商业价值,必须先实现用户价值.这个观点发源自PC统治互联网的时代,如今PC端的用户停留时间下降,用户行为趋于稳定保守,移动端则蒸蒸日上.而PC与移动端的区别之一是,PC端的用户流 ...