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 相关文章推荐
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
Apr 23 Javascript
javascript定义变量时加var与不加var的区别
Dec 22 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
js设置和获取自定义属性的方法
Oct 20 Javascript
Angularjs中的ui-bootstrap的使用教程
Feb 19 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 Javascript
JS实现马赛克图片效果完整示例
Apr 13 Javascript
小程序中canvas的drawImage方法参数使用详解
Jul 04 Javascript
javascript的delete运算符知识点总结
Nov 19 Javascript
javascript实现倒计时效果
Feb 17 Javascript
原生js拖拽功能制作滑动条实例代码
Feb 05 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 url路由入门实例
2014/04/23 PHP
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
基于jquery的一个拖拽到指定区域内的效果
2011/09/21 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
2014/10/17 Javascript
Json解析的方法小结
2016/06/22 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
React组件中的this的具体使用
2018/02/28 Javascript
解决axios post 后端无法接收数据的问题
2019/10/29 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
简单讲解Python中的闭包
2015/08/11 Python
python使用正则表达式匹配字符串开头并打印示例
2017/01/11 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
python实现狄克斯特拉算法
2019/01/17 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
python实现证件照换底功能
2019/08/20 Python
Python:__eq__和__str__函数的使用示例
2020/09/26 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
工程测量与监理专业应届生求职信
2013/11/27 职场文书
护士实习生自我鉴定范文
2013/12/10 职场文书
大学生职业生涯规划书模板
2014/01/03 职场文书
硕士研究生求职自荐信范文
2014/03/11 职场文书
卫校毕业生个人自我鉴定
2014/04/28 职场文书
党员志愿者活动总结
2014/06/26 职场文书
2015年财务试用期工作总结
2014/12/24 职场文书
党员个人自我评价
2015/03/03 职场文书
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL