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 相关文章推荐
判断是否输入完毕再激活提交按钮
Jun 26 Javascript
用jquery中插件dialog实现弹框效果实例代码
Nov 15 Javascript
JS &amp; JQuery 动态添加 select option
Jun 08 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 Javascript
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
Vue中$refs的用法详解
Jun 24 Javascript
深入学习js函数的隐式参数 arguments 和 this
Jun 24 Javascript
如何对react hooks进行单元测试的方法
Aug 14 Javascript
VUE+node(express)实现前后端分离
Oct 13 Javascript
JavaScript严格模式不支持八进制的问题讲解
Nov 07 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
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
Yii配置文件用法详解
2014/12/04 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
2019/05/06 Javascript
微信小程序自定义模态弹窗组件详解
2019/12/24 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
[03:36]2015国际邀请赛第二日现场精彩集锦
2015/08/06 DOTA
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python脚本实现集群检测和管理功能
2015/03/06 Python
在Python中处理时间之clock()方法的使用
2015/05/22 Python
Python函数式编程
2017/07/20 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
python进度条显示之tqmd模块
2020/08/22 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
几个Shell Script面试题
2014/04/18 面试题
高级护理专业大学生求职信
2013/10/24 职场文书
党员教师四风自我剖析材料
2014/09/30 职场文书
Python面向对象之成员相关知识总结
2021/06/24 Python
Python中22个万用公式的小结
2021/07/21 Python
vue如何清除浏览器历史栈
2022/05/25 Vue.js