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(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
Jun 18 Javascript
javascript学习笔记(十一) 正则表达式介绍
Jun 20 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
JavaScript计划任务后台运行的方法
Dec 18 Javascript
js 获取元素所有兄弟节点的实现方法
Sep 06 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 Javascript
基于JS实现快速读取TXT文件
Aug 25 Javascript
javascript使用canvas实现饼状图效果
Sep 08 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 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中SQL注入攻击与XSS攻击
2012/06/10 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
IE下js调试工具Companion.JS
2010/10/15 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
bootstrap下拉分页样式 带跳转页码
2018/12/29 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2019/02/11 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
2019/11/01 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
使用JS监听键盘按下事件(keydown event)
2019/11/07 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
Python下载指定页面上图片的方法
2016/05/12 Python
Python3 max()函数基础用法
2019/02/19 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
python如何实现单链表的反转
2020/02/10 Python
python实现PolynomialFeatures多项式的方法
2021/01/06 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
厂区绿化方案
2014/05/08 职场文书
村委会贫困证明范本
2014/09/17 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle