您现在的位置:计算机技术学习网 > 技术中心 > WEB编程 > JSP >

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

来源:网络 责任编辑:栏目编辑 发表时间:2013-07-01 12:22 点击:
 

基于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);
}

    相关新闻>>

      发表评论
      请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
      用户名: 验证码:点击我更换图片
      最新评论 更多>>

      推荐热点

      • JSP与Servlet
      • 自己动手写MiniBBS系列(基本篇)之用户登录
      • JSP取当前日期
      • JDBC 入门(一)
      • 打开一个jsp页面默认查询所有数据,调用action
      • 使用JSP标签库验证用户的输入(2)完
      • 自定义JSP标签(tag)浅议
      • WIN98/2000下的jsp服务器
      • JSP内建对象(二)
      网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
      Copyright © 2008-2015 计算机技术学习交流网. 版权所有

      豫ICP备11007008号-1