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


Posted in Javascript onApril 09, 2009
/* 
将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);
Javascript 相关文章推荐
15 个 JavaScript Web UI 库
May 19 Javascript
JS与jQ读取xml文件的方法
Dec 08 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 Javascript
通过js修改input、select默认字体颜色
Apr 19 Javascript
基于JS实现限时抢购倒计时间表代码
May 09 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
Jun 14 Javascript
使用JavaScript保存文本文件到本地的两种方法
Jan 22 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
Jul 21 Javascript
vue递归获取父元素的元素实例
Aug 07 Javascript
javascript RadioButtonList获取选中值
Apr 09 #Javascript
Cookie 注入是怎样产生的
Apr 08 #Javascript
javascript 表格排序和表头浮动效果(扩展SortTable)
Apr 07 #Javascript
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 #Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
Apr 07 #Javascript
javascript mouseover、mouseout停止事件冒泡的解决方案
Apr 07 #Javascript
javascript 兼容鼠标滚轮事件
Apr 07 #Javascript
You might like
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
php微信开发之上传临时素材
2016/06/24 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
Python中使用PIPE操作Linux管道
2015/02/04 Python
Python2.x与Python3.x的区别
2016/01/14 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
PyQt+socket实现远程操作服务器的方法示例
2019/08/22 Python
Python for循环与getitem的关系详解
2020/01/02 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
外贸主管求职简历的自我评价
2013/10/23 职场文书
护理毕业生自我鉴定
2014/02/11 职场文书
关于爱国的标语
2014/06/24 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
于丹论语心得观后感
2015/06/15 职场文书
采购员工作总结范文
2015/08/12 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
Python数组变形的几种实现方法
2022/05/30 Python