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动态添加 input type=file的实现代码
Jun 14 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
向JavaScript的数组中添加元素的方法小结
Oct 24 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 Javascript
javascript匀速动画和缓冲动画详解
Oct 20 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 Javascript
django使用channels2.x实现实时通讯
Nov 28 Javascript
JavaScript原生数组函数实例汇总
Oct 14 Javascript
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
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
截获网站title标签之家内容的例子
2006/10/09 PHP
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
Jquery中获取iframe的代码
2011/01/11 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
js图片处理示例代码
2014/05/12 Javascript
angularjs学习笔记之完整的项目结构
2015/09/26 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
2016/06/20 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
python append、extend与insert的区别
2016/10/13 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
【python】matplotlib动态显示详解
2019/04/11 Python
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
Python代码中如何读取键盘录入的值
2020/05/27 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
应届生骨科医生求职信
2013/10/31 职场文书
教师师德反思材料
2014/02/15 职场文书
大学生毕业评语
2014/12/31 职场文书
培训计划通知
2015/07/15 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电
使用tensorflow 实现反向传播求导
2021/05/26 Python
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技