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

网页上有许多图片切换的幻灯片效果,它们大多用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里写一个swing把数据插入数据库

最终的目标是想这样的，在JavaScript里写一个swing来实现确定取消，来决定是否执行这个功能的，但是在执行的过程中，出现了一点问题，每次执行时，都是直接就会插入把数据插入数据库，不能控制了，想要知道应该怎样>>>详细阅读

本文标题：javascript实现图片切换的幻灯片效果源代码

地址：http://www.17bianji.com/kaifa2/JS/22838.html

1/2 1