javascript实现幻灯片效果

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

废话少说,看代码

1. sx.activex.imagefade={
2.     init:function(imga,fadeint,fadeoutt){
3.         var ti=new Array();
4.         for(var i=0;i
5.             ti[i]=new Image();
6.             ti[i].src=imga[i]
7.             }
8.             var div=document.createElement("div");
9.             var img=document.createElement("img");
10.             img.src=ti[0].src;
11.             var span=document.createElement("span")
12.             span.style.backgroundColor="yellow";
13.             var a=[];
14.             for(var i=0;i
15.                 a[i]=document.createElement("a")
16.                 a[i].style.backgroundColor="red";
17.                 a[i].style.width="10px";
18.                 a[i].style.margin="2px";
19.                 a[i].href="javascript:void(0)";
20.                 a[i].οnclick=function(r){
21.                     return function(){
22.                         var t=100;
23.                         var t1=0;
24.                     var h=window.setInterval(function(){
25.                         if(t>=0){
26.                             img.style.filter="alpha(opacity="+t+");";
27.                             t=t-2;}
28.                     else{
29.                             window.clearInterval(h);
30.                             img.src=ti[r].src;
31.                             var h1=window.setInterval(function(){
32.                         if(t1<=100){
33.                             img.style.filter="alpha(opacity="+t1+");";
34.                             t1=t1+2;}
35.                     else{
36.                             window.clearInterval(h1);
37.                             }
38.                     },fadeint);
39.                             }
40.                     },fadeoutt);
41.                     
42.                     }
43.                 }(i);
44.                 a[i].innerText=i+1;
45.                 span.appendChild(a[i]);
46.             }
47.             
48.             div.style.position="absolute";
49.             div.style.height="200px";
50.             div.style.width="200px";
51.             div.appendChild(img);
52.             img.style.height="100%";
53.             img.style.width="100%";
54.             
55.             span.style.position="absolute";
56.             span.style.right="10px";
57.             span.style.bottom="10px";
58.             div.appendChild(span);
59.             return div;
60.     }
61. }

调用的html

2.     
3.         
4.     
5.     
6.         
7.         "kongjian.js">
8.         
9.         
10.     

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

这段js的关键是a[i].onclick这段代码,注意这里套用了两个setintertval,并用了闭包,在赋值时要当心了.

有什么疑问的话还请多多交流啊