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

网页上有许多图片切换的幻灯片效果,它们大多用flash实现,那javascript能不能实现他们呢,当然可以,我自己写了一个,需要的朋友可以参考下

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

废话少说,看代码

 
sx.activex.imagefade={ 
init:function(imga,fadeint,fadeoutt){ 
var ti=new Array(); 
for(var i=0;iti[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;ia[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; 
} 
} 