当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jQuery 插件 将this下的div轮番显示

Javascript
javascript实现的鼠标悬停时动态翻滚的导航条
通过隐藏option实现select的联动效果
jquery 输入框数字限制插件
文字来回上下移动或跳动的代码
JS旋转的彩色文字轮转特效
不一样的文字闪烁 轮番闪烁
Javascript 解疑
jQuery 白痴级入门教程
Jquery在IE7下无法使用 $.ajax解决方法
javascript 日期常用的方法
ASP中进行HTML数据及JS数据编码函数
JS 中document.URL 和 windows.location.href 的区别
跨域表单提交状态的变相判断代码
JS解析XML的实现代码
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Javascript 定时器调用传递参数的方法
把html页面的部分内容保存成新的html文件的jquery代码
XHTML下,JS浮动代码失效的问题
两个select之间option的互相添加操作(jquery实现)
Jquery 获取表单text,areatext,radio,checkbox,select值的代码

Javascript 中的 jQuery 插件 将this下的div轮番显示


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 455 ::
收藏到网摘: n/a

将this下的div轮番显示 dname指定需要执行此动作的元素,如果没有指定dname,将默认全部子元素

复制代码 代码如下:

/*
将this下的div轮番显示
dname指定需要执行此动作的元素,如果没有指定dname,将默认全部子元素;
tname指定与dname对应的激活元素;
speed显示切换速度;
effe显示的效果;
*/
(function(){
.fn.w_picSwap=function(dname,tname,speed,effe){
speed=speed || 2000;
dname=dname || "";
tname=tname || "";
effe=effe || 1;
return this.each(function(){
var myTime;
var obj=(this);
var objs=(this).find(dname);
var objnl=(this).find(tname).not(dname);
var len2=objnl.length;
var len=objs.length;
if(len<2){ return;}
var si=0;
var old=0;
objs.not(':first').css('opacity',0);
function showImg(){
old=si;si=(si==(len-1))?0:si+1;
effect(objs.eq(old),objs.eq(si));
if(len2){
objnl.eq(old).removeClass("on");
objnl.eq(si).addClass("on");
}
};
function effect(o,n){
switch(effe){
case 1:
o.stop().animate({opacity:0});
n.stop().animate({opacity:1});
break;
case 2:
var toff=o.position();
n.stop().css("top",toff.top+o.outerHeight()).animate({top:toff.top,opacity:1},200);
o.stop().animate({top:toff.top-o.outerHeight(),opacity:0});
break;
}
}
function begin(){
myTime = setInterval(showImg,speed);
};
objnl.mouseover(function(){
si=objnl.index(this);
showImg();
});
//滑入 停止动画,滑出开始动画.
obj.hover(function(){
if(myTime){clearInterval(myTime);}
},function(){
begin();
});
begin();
});
};
})(jQuery);