javascript实现图片切换的幻灯片效果源代码


Posted in Javascript onDecember 12, 2012

网页上有许多图片切换的幻灯片效果,它们大多用flash实现,那javascript能不能实现他们呢,当然可以,我自己写了一个,和大家一同分享

废话少说,看代码

sx.activex.imagefade={ 
init:function(imga,fadeint,fadeoutt){ 
var ti=new Array(); 
for(var i=0;i<imga.length;i++){ 
ti[i]=new Image(); 
ti[i].src=imga[i] 
} 
var div=document.createElement("div"); 
var img=document.createElement("img"); 
img.src=ti[0].src; 
var span=document.createElement("span") 
span.style.backgroundColor="yellow"; 
var a=[]; 
for(var i=0;i<imga.length;i++){ 
a[i]=document.createElement("a") 
a[i].style.backgroundColor="red"; 
a[i].style.width="10px"; 
a[i].style.margin="2px"; 
a[i].href="javascript:void(0)"; 
a[i].onclick=function(r){ 
return function(){ 
var t=100; 
var t1=0; 
var h=window.setInterval(function(){ 
if(t>=0){ 
img.style.filter="alpha(opacity="+t+");"; 
t=t-2;} 
else{ 
window.clearInterval(h); 
img.src=ti[r].src; 
var h1=window.setInterval(function(){ 
if(t1<=100){ 
img.style.filter="alpha(opacity="+t1+");"; 
t1=t1+2;} 
else{ 
window.clearInterval(h1); 
} 
},fadeint); 
} 
},fadeoutt); 
} 
}(i); 
a[i].innerText=i+1; 
span.appendChild(a[i]); 
} 
div.style.position="absolute"; 
div.style.height="200px"; 
div.style.width="200px"; 
div.appendChild(img); 
img.style.height="100%"; 
img.style.width="100%"; 
span.style.position="absolute"; 
span.style.right="10px"; 
span.style.bottom="10px"; 
div.appendChild(span); 
return div; 
} 
}

调用的html
<html> 
<head> 
<title>Untitled Document</title> 
</head> 
<body> 
<script src="kongjian.js"></script> 
<script> 
var a=sx.activex.imagefade.init(["1.jpg","1 (1).jpg"],10,10); 
a.style.height="400px"; 
a.style.width="400px"; 
//a.all[1].style.backgroundColor="green"; 
document.body.appendChild(a); 
</script> 
</body> 
</html>

上面的js函数的第一个参数是你要的图片的地址所组成的数组,第二个参数是图片淡出的timer,第三个参数是淡入的timer.

这段js的关键是a[i].onclick这段代码,注意这里套用了两个setintertval,并用了闭包,在赋值时要当心了.
有什么疑问的话还请多多交流啊

Javascript 相关文章推荐
offsetParent 算法分析
Apr 05 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
js变换显示图片的实例
Apr 16 Javascript
js生成随机数之random函数随机示例
Dec 20 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
jQuery中removeProp()方法用法实例
Jan 05 Javascript
js控制li的隐藏和显示实例代码
Oct 15 Javascript
基于JavaScript实现的顺序查找算法示例
Apr 14 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
vue单页开发父子组件传值思路详解
May 18 Javascript
javascript 使用sleep函数的常见方法详解
Apr 26 Javascript
原生JavaScript实现换肤
Feb 19 Javascript
javascript跑马灯悬停放大效果实现代码
Dec 12 #Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 #Javascript
javascript采用数组实现tab菜单切换效果
Dec 12 #Javascript
javascript仿qq界面的折叠菜单实现代码
Dec 12 #Javascript
日历查询的算法 如何计算某一天是星期几
Dec 12 #Javascript
javascript实现日历控件(年月日关闭按钮)
Dec 12 #Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
Dec 11 #Javascript
You might like
PhpStorm terminal无法输入命令的解决方法
2016/10/09 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
许愿墙中用到的函数
2006/10/07 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
2010/07/13 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
jQuery实现长文字部分显示代码
2013/05/13 Javascript
js密码强度校验
2015/11/10 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
vue.js中过滤器的使用教程
2017/06/08 Javascript
JavaScript数组去重算法实例小结
2018/05/07 Javascript
关于微信公众号开发无法支付的问题解决
2018/12/28 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
2019/02/02 Javascript
开源一个微信小程序仪表盘组件过程解析
2019/07/30 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
js实现随机div颜色位置 类似满天星效果
2019/10/24 Javascript
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
python实现证件照换底功能
2019/08/20 Python
python中return不返回值的问题解析
2020/07/22 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
Python中使用Selenium环境安装的方法步骤
2021/02/22 Python
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
西部世纪.net笔试题面试题
2014/04/03 面试题
测绘工程本科生求职信
2013/10/10 职场文书
暑期教师培训方案
2014/06/07 职场文书
离婚协议书怎么写
2015/01/26 职场文书
教师党员个人自我评价
2015/03/04 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
MySQL 如何限制一张表的记录数
2021/09/14 MySQL