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 相关文章推荐
javascript mouseover、mouseout停止事件冒泡的解决方案
Apr 07 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 Javascript
js冒泡法和数组转换成字符串示例代码
Aug 14 Javascript
js动态修改input输入框的type属性(实现方法解析)
Nov 13 Javascript
JavaScript对IE操作的经典代码(推荐)
Mar 10 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
JavaScript语言精粹经典实例(整理篇)
Jun 07 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 Javascript
vue中使用v-for时为什么不能用index作为key
Apr 04 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
各种战术和打法的原创者
2020/03/04 星际争霸
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
php多维数组去掉重复值示例分享
2014/03/02 PHP
php输入流php://input使用浅析
2014/09/02 PHP
PHP数据库操作三:redis用法分析
2017/08/16 PHP
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
Vue中强制组件重新渲染的正确方法
2021/01/03 Vue.js
Python中的生成器和yield详细介绍
2015/01/09 Python
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
Python深度优先算法生成迷宫
2018/01/22 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
python set集合使用方法解析
2019/11/05 Python
python的等深分箱实例
2019/11/22 Python
Python PyInstaller安装和使用教程详解
2020/01/08 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
关于Python3的import问题(pycharm可以运行命令行import错误)
2020/11/18 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
2021/02/25 Python
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
积极分子思想汇报
2014/01/04 职场文书
生产班组长岗位职责
2014/01/05 职场文书
内科护士节演讲稿
2014/09/11 职场文书
2014年财政工作总结
2014/12/10 职场文书
年会邀请函范文
2015/01/30 职场文书
人与自然的观后感
2015/06/18 职场文书
工作建议书范文
2019/07/08 职场文书
redis缓存存储Session原理机制
2021/11/20 Redis
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android