基于jQuery的可用于选项卡及幻灯的切换插件


Posted in Javascript onMarch 28, 2011

思路就不说了,记得以前写过一个自动切换的幻灯插件:,思路有部分是类似的。当然,本文中插件源码中也有注释~ 插件核心代码:点此查看演示

$.fn.WIT_SetTab=function(iSet){ 
/* 
* @Mr.Think 
* Nav: 导航钩子; 
* Field:切换区域 
* K:初始化索引; 
* CurCls:高亮样式; 
* Auto:是否自动切换; 
* AutoTime:自动切换时间; 
* OutTime:淡入时间; 
* InTime:淡出时间; 
* CrossTime:鼠标无意识划过时间 
* Ajax:是否开启ajax 
* AjaxFun:开启ajax后执行的函数 
*/ 
iSet=$.extend({Nav:null,Field:null,K:0,CurCls:'cur',Auto:false,AutoTime:4000,OutTime:100,InTime:150,CrossTime:60},iSet||{}); 
var acrossFun=null,hasCls=false,autoSlide=null; 
//切换函数 
function changeFun(n){ 
iSet.Field.filter(':visible').fadeOut(iSet.OutTime, function(){ 
iSet.Field.eq(n).fadeIn(iSet.InTime).siblings().hide(); 
}); 
iSet.Nav.eq(n).addClass(iSet.CurCls).siblings().removeClass(iSet.CurCls); 
} 
//初始高亮第一个 
changeFun(iSet.K); 
//鼠标事件 
iSet.Nav.hover(function(){ 
iSet.K=iSet.Nav.index(this); 
if(iSet.Auto){ 
clearInterval(autoSlide); 
} 
hasCls = $(this).hasClass(iSet.CurCls); 
//避免无意识划过时触发 
acrossFun=setTimeout(function(){ 
//避免当前高亮时划入再次触发 
if(!hasCls){ 
changeFun(iSet.K); 
} 
},iSet.CrossTime); 
},function(){ 
clearTimeout(acrossFun); 
//ajax调用 
if(iSet.Ajax){ 
iSet.AjaxFun(); 
} 
if(iSet.Auto){ 
//自动切换 
autoSlide = setInterval(function(){ 
iSet.K++; 
changeFun(iSet.K); 
if (iSet.K == iSet.Field.size()) { 
changeFun(0); 
iSet.K=0; 
} 
}, iSet.AutoTime) 
} 
}).eq(0).trigger('mouseleave'); 
}

打包下载地址
Javascript 相关文章推荐
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
javascript-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
Underscore.js 的模板功能介绍与应用
Dec 24 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
jsp网页搜索结果中实现选中一行使其高亮
Feb 17 Javascript
JavaScript function 的 length 属性使用介绍
Sep 15 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
AngularJS常见过滤器用法实例总结
Jul 06 Javascript
Angularjs上传文件组件flowjs功能
Aug 07 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 #Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 #Javascript
基于jquery的获取浏览器窗口大小的代码
Mar 28 #Javascript
Firefox中autocomplete="off" 设置不起作用Bug的解决方法
Mar 25 #Javascript
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 #Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 #Javascript
基于jquery的3d效果实现代码
Mar 23 #Javascript
You might like
PHP 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
php类声明和php类使用方法示例分享
2014/03/29 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
php工具型代码之印章抠图
2018/07/18 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
function, new function, new Function之间的区别
2007/03/08 Javascript
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
JavaScript 是什么意思
2016/09/22 Javascript
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
2021/01/25 Javascript
Python urlopen()函数 示例分享
2014/06/12 Python
Python列表生成器的循环技巧分享
2015/03/06 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
Python matplotlib可视化实例解析
2020/06/01 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
在宿舍喝酒的检讨书
2014/09/28 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
信息技术课教学反思
2016/02/23 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL
Pytorch使用shuffle打乱数据的操作
2021/05/20 Python
Java SSM配置文件案例详解
2021/08/30 Java/Android