基于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 相关文章推荐
jquery easyui的tabs使用时的问题
Mar 23 Javascript
select标记美化--JS式插件、后期加载
Apr 01 Javascript
jquery 实现上下滚动效果示例代码
Aug 09 Javascript
js文本框输入内容智能提示效果
Dec 02 Javascript
深入浅析AngularJS和DataModel
Feb 16 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 Javascript
JS实现拖动滚动条评分的效果代码分享
Sep 29 Javascript
Javascript前端经典的面试题及答案
Mar 14 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
解决vue-cli webpack打包开启Gzip 报错问题
Jul 24 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
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
php面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法
2019/04/16 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
js 数值项目的格式化函数代码
2010/05/14 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
qTip2 精致的基于jQuery提示信息插件
2012/02/17 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
微信小程序页面间跳转传参方式总结
2019/06/13 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
python实现kMeans算法
2017/12/21 Python
python 动态生成变量名以及动态获取变量的变量名方法
2019/01/20 Python
python3实现表白神器
2019/04/09 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
.NET现在共支持多少种语言
2014/02/26 面试题
简历中个人自我评价范文
2013/12/26 职场文书
法人委托书
2014/07/31 职场文书
干部个人对照检查材料
2014/08/25 职场文书
财务务虚会发言材料
2014/10/20 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
银行工作心得体会范文
2016/01/23 职场文书
工作报告范文
2019/06/20 职场文书
Java设计模式中的命令模式
2022/04/28 Java/Android