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 相关文章推荐
Ext JS 4官方文档之三 -- 类体系概述与实践
Dec 16 Javascript
JavaScript实现仿网易通行证表单验证
May 25 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
Apr 20 Javascript
[js高手之路]原型式继承与寄生式继承详解
Aug 28 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
5种 JavaScript 方式实现数组扁平化
Oct 05 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
discuz安全提问算法
2007/06/06 PHP
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
详解php中生成标准uuid(guid)的方法
2019/04/28 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
FireFox中textNode分片的问题
2007/04/10 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
vue实现分页加载效果
2019/12/24 Javascript
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
python清除字符串里非数字字符的方法
2015/07/02 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
python如何重载模块实例解析
2018/01/25 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
django的登录注册系统的示例代码
2018/05/14 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
python3中编码获取网页的实例方法
2020/11/16 Python
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
网络方面基础面试题
2012/11/16 面试题
电气自动化大学生求职信
2013/10/16 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
幼师中班个人总结
2015/02/12 职场文书
鸡毛信观后感
2015/06/11 职场文书
体育教师研修感悟
2015/11/18 职场文书