 
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; 
} 
} 

調(diào)用的html

復(fù)制代碼代碼如下:

 
<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函數(shù)的第一個(gè)參數(shù)是你要的圖片的地址所組成的數(shù)組,第二個(gè)參數(shù)是圖片淡出的timer,第三個(gè)參數(shù)是淡入的timer.

這段js的關(guān)鍵是a[i].onclick這段代碼,注意這里套用了兩個(gè)setintertval,并用了閉包,在賦值時(shí)要當(dāng)心了.
有什么疑問的話還請多多交流啊

您可能感興趣的文章: