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有关的小细节
Apr 02 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
Javascript原型链和原型的一个误区
Oct 22 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
JQuery中DOM实现事件移除的方法
Jun 13 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
原生JS实现动态添加新元素、删除元素方法
May 05 Javascript
JavaScript利用键盘码控制div移动
Mar 19 Javascript
javascript实现拼图游戏
Jan 29 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/01/07 PHP
php中namespace及use用法分析
2016/12/06 PHP
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
多个datatable共存造成多个表格的checkbox都被选中
2013/07/11 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
2018/09/03 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
js实现百度登录窗口拖拽效果
2020/03/19 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
Python设计模式之抽象工厂模式
2016/08/25 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
pytorch 求网络模型参数实例
2019/12/30 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
selenium设置浏览器为headless无头模式(Chrome和Firefox)
2021/01/08 Python
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
《大江保卫战》教学反思
2014/04/11 职场文书
理想点亮人生演讲稿
2014/05/21 职场文书
分居协议书范本
2014/11/03 职场文书
python3美化表格数据输出结果的实现代码
2021/04/14 Python