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 相关文章推荐
js滚动条多种样式,推荐
Feb 05 Javascript
Mootools 1.2教程 设置和获取样式表属性
Sep 15 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
Apr 06 Javascript
jQuery 源码分析笔记(7) Queue
Jun 19 Javascript
尝试在让script的type属性等于text/html
Jan 15 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
弹出最简单的模式化遮罩层的js代码
Dec 04 Javascript
Angular4学习笔记之准备和环境搭建项目
Aug 01 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
elementui的默认样式修改方法
Feb 23 Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 Javascript
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
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
一首老MP3,致敬WAR3经典
2021/03/08 魔兽争霸
截获网站title标签之家内容的例子
2006/10/09 PHP
php addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
CodeIgniter使用phpcms模板引擎
2013/11/12 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
php获取微信openid方法总结
2019/10/10 PHP
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
理解Javascript_05_原型继承原理
2010/10/13 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
js将当前时间格式转换成时间搓(自写)
2013/09/26 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
类似于QQ的右滑删除效果的实现方法
2016/10/16 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
bootstrap IE8 兼容性处理
2017/03/22 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
2017/09/30 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
基于python 取余问题(%)详解
2020/06/03 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
运行Python编写的程序方法实例
2020/10/21 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
上班迟到检讨书
2014/01/10 职场文书
高中生的自我评价
2014/03/04 职场文书
施工安全责任书
2014/04/14 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
学术会议开幕词
2016/03/03 职场文书
python异步的ASGI与Fast Api实现
2021/07/16 Python
服务器nginx权限被拒绝解决案例
2022/09/23 Servers