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 相关文章推荐
jQuery中filter(),not(),split()使用方法
Jul 06 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
简单的ajax连接库分享(不用jquery的ajax)
Jan 19 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
基于JavaScript实现点击页面任何位置返回
Aug 31 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 Javascript
bootstrap轮播图示例代码分享
May 17 Javascript
vue引入jq插件的实例讲解
Sep 12 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 28 Javascript
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
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
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
php foreach如何跳出两层循环(详解)
2016/11/05 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
js 操作select与option(示例讲解)
2013/12/20 Javascript
你可能不知道的JavaScript的new Function()方法
2014/04/17 Javascript
js中window.open打开一个新的页面
2014/08/10 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
简单实现jquery隔行变色
2017/11/09 jQuery
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
element el-input directive数字进行控制
2018/10/11 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01
2020/11/02 DOTA
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
Python学习pygal绘制线图代码分享
2017/12/09 Python
python2 与python3的print区别小结
2018/01/16 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
乔迁之喜主持词
2014/03/27 职场文书
中药学专业毕业生推荐信
2014/07/10 职场文书
团拜会主持词
2015/07/04 职场文书