picChange 图片切换特效的函数代码


Posted in Javascript onMay 06, 2010

picChange 图片切换特效的函数代码

可扩展的封装方式,方便实现不同特效,源码中给出了淡出效果(fade函数),和移出效果(move函数)的实现方式。

一句话函数调用,实现图片切换特效。
picChange(“图片ul列表的id” , 切换图片的方法引用 , 图片切换时间 , 图片移动方向);
用最简单的调用方式和最简洁的html代码来实现这个常用的图片切换效果。
使用方法示例:

html代码:

<div id=”win”> 
<ul id=”picChange”> 
<li><img src=”img/1.jpg” alt=”" /></li> 
<li><img src=”img/1.jpg” alt=”" /></li> 
…… 
</ul> 
</div>

调用方式:
//直接切换效果 
picChange(“picChange”); 
//淡出效果 
picChange(“picChange”,fade,500); 
//向上移出效果 
picChange(“picChange”,move,500,”up”); 
//向下移出效果 
picChange(“picChange”,move,500,”down”); 
//向左移出效果 
picChange(“picChange”,move,500,”left”); 
//向右移出效果 
picChange(“picChange”,move,500,”right”);

看Demo猛击这里:http://demo.3water.com/js/picChange/index.html

打包下载地址

Javascript 相关文章推荐
jQuery弹出(alert)select选择的值
Apr 21 Javascript
IE下JS读取xml文件示例代码
Aug 05 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
Feb 24 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
微信小程序 video详解及简单实例
Jan 16 Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 Javascript
Bootstrap多级菜单的实现代码
May 23 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
Aug 10 Javascript
微信小程序实现判断是分享到群还是个人功能示例
May 03 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
JS 自定义函数缺省值的设置方法
May 05 #Javascript
JSQL 批量图片切换的实现代码
May 05 #Javascript
JSQL 基于客户端的成绩统计实现方法
May 05 #Javascript
JSQL SQLProxy 的 php 版本代码
May 05 #Javascript
JSQL  一个 web DB 的封装
May 05 #Javascript
Javascript JSQL,SQL无处不在,
May 05 #Javascript
Javascript 去除数组的重复元素
May 04 #Javascript
You might like
Php+SqlServer实现分页显示
2006/10/09 PHP
linux下安装php的memcached客户端
2014/08/03 PHP
PHP文件缓存内容保存格式实例分析
2014/08/20 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
JavaScript调试之console.log调试的一个小技巧分享
2017/08/07 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
Python实现选择排序
2017/06/04 Python
Python中的TCP socket写法示例
2018/05/11 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
python实现移动木板小游戏
2020/10/09 Python
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
会展策划与管理专业求职信
2014/06/09 职场文书
法人委托书范本
2014/09/15 职场文书
房产转让协议书(2014版)
2014/09/30 职场文书
2014年文员工作总结
2014/11/18 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python
Go语言空白表示符_的实例用法
2021/07/04 Golang