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 相关文章推荐
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 Javascript
javascript中的括号()用法小结
Apr 14 Javascript
让人蛋疼的JavaScript语法特性
Sep 30 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
详解webpack + vue + node 打造单页面(入门篇)
Sep 23 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 Javascript
javascript实现弹幕墙效果
Nov 28 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中的boolean(布尔)类型详解
2013/10/28 PHP
PHP中的按位与和按位或操作示例
2014/01/27 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
javascript document.referrer 用法
2009/04/30 Javascript
JQuery index()方法使用代码
2010/06/02 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
[01:36]DOTA2完美大师赛趣味视频之与队友相处的十万个技巧
2017/11/19 DOTA
python 编码规范整理
2018/05/05 Python
python调用百度语音识别api
2018/08/30 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
python字符串Intern机制详解
2019/07/01 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
基于python实现查询ip地址来源
2020/06/02 Python
关于青春的演讲稿500字
2014/08/22 职场文书
欠款起诉书范文
2015/05/19 职场文书
大学军训心得体会800字
2016/01/11 职场文书
mysql如何能有效防止删库跑路
2021/10/05 MySQL