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

最近公司项目页面中用到选项卡与幻灯比较多，特地写了个集选项卡、幻灯片与播放控制于一体的插件，同页面可多次使用。思路就不说了，记得以前写过一个自动切换的幻灯插件： http://mrthink.net/jq-plugin-ifadeslide/，思路有部分是类似的。当然，本文中插件源码中也有注释~ 插件核心代码： 点此查看样例

$.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');

}

原文发布于Mr.Think的博客：http://mrthink.net/jq-settab-slide/ 转载请注明