基于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 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
JavaScript常用对象的方法和属性小结
Jan 24 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
详解layui弹窗父子窗口之间传参数的方法
Jan 16 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
javascript实现数字时钟效果
Feb 06 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
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
PHP把空格、换行符、中文逗号等替换成英文逗号的正则表达式
2014/05/04 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
PHP+Apache+Mysql环境搭建教程
2016/08/01 PHP
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
javascript URL编码和解码使用说明
2010/04/12 Javascript
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
javascript的push使用指南
2014/12/05 Javascript
NodeJS制作爬虫全过程
2014/12/22 NodeJs
初识Javascript小结
2015/07/16 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
HTML5 js实现拖拉上传文件功能
2020/11/20 Javascript
JavaScript中for循环的几种写法与效率总结
2017/02/03 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
Python设计模式之中介模式简单示例
2018/01/09 Python
Python断言assert的用法代码解析
2018/02/03 Python
Django 多语言教程的实现(i18n)
2018/07/07 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
美国最大的网上冲印店:Shutterfly
2017/01/01 全球购物
美国中西部家用医疗设备商店:Med Mart(轮椅、踏板车、升降机等)
2019/04/26 全球购物
经理秘书找工作求职信
2013/12/19 职场文书
优秀员工评优方案
2014/06/13 职场文书
2015党建工作简报
2015/07/21 职场文书
运动会闭幕式致辞
2015/07/29 职场文书