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 相关文章推荐
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
May 16 Javascript
vue 自定义指令自动获取文本框焦点的方法
Aug 25 Javascript
Javascript之高级数组API的使用实例
Mar 08 Javascript
vue搜索和vue模糊搜索代码实例
May 07 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
webpack安装配置与常见使用过程详解(结合vue)
Jun 01 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模板页面中分页代码的解析
2009/02/06 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
2012/11/13 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
2016/08/16 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
Validform验证时可以为空否则按照指定格式验证
2017/10/20 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
ES6入门教程之Array.from()方法
2019/03/23 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
Python 和 JS 有哪些相同之处
2017/11/23 Python
利用python对Excel中的特定数据提取并写入新表的方法
2018/06/14 Python
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
广告学专业毕业生自荐信
2013/09/24 职场文书
光盘行动倡议书
2014/02/02 职场文书
商场促销活动方案
2014/02/08 职场文书
社区健康教育工作方案
2014/06/03 职场文书
医院节能减排方案
2014/06/13 职场文书
技术入股合作协议书
2014/10/07 职场文书
同事打架检讨书
2015/05/06 职场文书
小学思想品德教学反思
2016/02/24 职场文书
Oracle 多表查询基本语法实例
2022/04/18 Oracle