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 数组实现一个类似ruby的迭代器
Oct 27 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
Apr 02 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
js省市县三级联动效果实例
Apr 15 Javascript
简单学习vue指令directive
Nov 03 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
解析Angular 2+ 样式绑定方式
Jan 15 Javascript
jQuery位置选择器用法实例分析
Jun 28 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
PHP 批量更新网页内容实现代码
2010/01/05 PHP
php 静态变量与自定义常量的使用方法
2010/01/26 PHP
深入理解require与require_once与include以及include_once的区别
2013/06/05 PHP
一个好用的PHP验证码类实例分享
2013/12/27 PHP
php 字符串中的\n换行符无效、不能换行的解决方法
2014/04/02 PHP
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
Javascript 按位左移运算符使用介绍(
2014/02/04 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
了解VUE的render函数的使用
2017/06/08 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
Jquery动态列功能完整实例
2019/08/30 jQuery
python实现将pvr格式转换成pvr.ccz的方法
2015/04/28 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
Django缓存系统实现过程解析
2019/08/02 Python
Python timeit模块的使用实践
2020/01/13 Python
python实现UDP协议下的文件传输
2020/03/20 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
什么是跨站脚本攻击
2014/12/11 面试题
大专计算机个人求职的自我评价
2013/10/21 职场文书
舞蹈教育学专业推荐信
2013/11/27 职场文书
个人委托书范本汇总
2014/10/01 职场文书
2014年食堂工作总结
2014/11/20 职场文书
社区安置帮教工作总结2015
2015/05/20 职场文书