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 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
Firefox中beforeunload事件的实现缺陷浅析
May 03 Javascript
JS对select控件option选项的增删改查示例代码
Oct 21 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
Jan 27 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
AngularJS中比较两个数组是否相同
Aug 24 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
新手vue构建单页面应用实例代码
Sep 18 Javascript
在vue项目中优雅的使用SVG的方法实例详解
Dec 03 Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 Javascript
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
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
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
python创建只读属性对象的方法(ReadOnlyObject)
2013/02/10 Python
Python、Javascript中的闭包比较
2015/02/04 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
Python实现的插入排序算法原理与用法实例分析
2017/11/22 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
python中upper是做什么用的
2020/07/20 Python
python线程优先级队列知识点总结
2021/02/28 Python
上班睡觉检讨书
2014/01/09 职场文书
《在山的那边》教学反思
2014/02/23 职场文书
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
入职担保书范文
2014/05/21 职场文书
项目经理岗位职责
2015/01/31 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
Python实现日志实时监测的示例详解
2022/04/06 Python