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 相关文章推荐
jquery Firefox3.5中操作select的问题
Jul 10 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
js call方法详细介绍(js 的继承)
Nov 18 Javascript
用js来刷新当前页面保留参数的具体实现
Dec 23 Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
Angular2+如何去除url中的#号详解
Dec 20 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 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
Wordpress php 分页代码
2009/10/21 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
javascript字符串拼接的效率问题
2010/12/25 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
Angular路由ui-router配置详解
2018/08/01 Javascript
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
用python与文件进行交互的方法
2018/03/01 Python
对Python中实现两个数的值交换的集中方法详解
2019/01/11 Python
Python之循环结构
2019/01/15 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
django项目中新增app的2种实现方法
2020/04/01 Python
使用CSS3创建动态菜单效果
2015/07/10 HTML / CSS
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
static关键字的用法
2013/10/07 面试题
Sql面试题
2013/03/20 面试题
什么是方法的重载
2013/06/24 面试题
精彩自我鉴定
2014/01/16 职场文书
2014年元旦促销活动方案
2014/02/22 职场文书
金融管理毕业生求职信
2014/03/03 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
小学老师对学生的评语
2014/12/29 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
老人院义工活动感想
2015/08/07 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL