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实现面向对象类的功能书写技巧
Mar 07 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
深入理解React中es6创建组件this的方法
Aug 29 Javascript
5种JavaScript脚本加载的方式
Jan 16 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
小程序实现分类页
Jul 12 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 Javascript
Postman环境变量全局变量使用方法详解
Aug 13 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 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 JSON中文乱码的解决方法详解
2013/06/06 PHP
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
用js实现随机返回数组的一个元素
2007/08/13 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
2018/08/04 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
详解Python中的循环语句的用法
2015/04/09 Python
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
python2.7安装图文教程
2018/03/13 Python
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
详解numpy的argmax的具体使用
2019/05/27 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
基于python实现获取网页图片过程解析
2020/05/11 Python
python3.9实现pyinstaller打包python文件成exe
2020/12/13 Python
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
保险专业大专生求职信
2013/10/26 职场文书
个人培训自我鉴定
2014/03/28 职场文书
英文求职信范文
2014/05/23 职场文书
门球健将观后感
2015/06/16 职场文书
golang内置函数len的小技巧
2021/07/25 Golang