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实现表格中相同单元格合并示例代码
Jun 26 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
微信支付如何实现内置浏览器的H5页面支付
Sep 25 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
May 31 Javascript
JS递归遍历对象获得Value值方法技巧
Jun 14 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
微信小程序实现发红包功能
Jul 11 Javascript
vue 单页应用和多页应用的优劣
Oct 22 Javascript
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下实现伪 url 的超简单方法[转]
2007/09/24 PHP
php代码把全角数字转为半角数字
2007/12/10 PHP
PHP之数组学习
2011/05/29 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
prototype1.4中文手册
2006/09/22 Javascript
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
js实现常见的工具条效果
2017/03/02 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
详解基于vue-router的动态权限控制实现方案
2017/09/28 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
vue页面更新patch的实现示例
2020/03/25 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
一张图带我们入门Python基础教程
2017/02/05 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
如何在django中添加日志功能
2020/02/06 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
美国正宗设计师眼镜在线零售商:EYEZZ
2019/03/23 全球购物
拖鞋店创业计划书
2014/01/15 职场文书
20年同学聚会邀请函
2014/02/04 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
励志演讲稿500字
2014/08/21 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
2015年党日活动总结范文
2015/03/25 职场文书
十大最强妖精系宝可梦,哲尔尼亚斯实力最强,第五被称为大力士
2022/03/18 日漫
Docker部署Mysql8的实现步骤
2022/07/07 Servers