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 相关文章推荐
javascript 面向对象思想 附源码
Jul 07 Javascript
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
基于jquery &amp; json的省市区联动代码
Jun 26 Javascript
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
jquery 快速回到页首的方法
Dec 05 Javascript
Javascript数组中push方法用法分析
Oct 31 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
Electron中实现大文件上传和断点续传功能
Oct 28 Javascript
js html实现计算器功能
Nov 13 Javascript
javascript json字符串到json对象转义问题
Jan 22 Javascript
jQuery HTML css()方法与css类实例详解
May 20 jQuery
微信小程序tab左右滑动切换功能的实现代码
Feb 08 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 命令行参数详解及应用
2011/05/18 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
prototype1.4中文手册
2006/09/22 Javascript
CSS和Javascript简单复习资料
2010/06/29 Javascript
JavaScript代码复用模式详解
2014/11/07 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
jQuery 操作 HTML 元素和属性的方法
2018/11/12 jQuery
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
js判断密码强度的方法
2020/03/18 Javascript
[00:27]DOTA2次级职业联赛 - Lilith战队宣传片
2014/12/01 DOTA
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
python元组操作实例解析
2014/09/23 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
python实现指定ip端口扫描方式
2019/12/17 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
信息技术培训感言
2014/03/06 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
学校2014年度工作总结
2014/12/06 职场文书
小学优秀班主任材料
2014/12/17 职场文书
超市收银员岗位职责
2015/04/07 职场文书
2015年化妆品销售工作总结
2015/05/11 职场文书
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python