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

256 阅读 0 评论 169 点赞

我是靠谱客的博主时尚蜻蜓，最近开发中收集的这篇文章主要介绍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> 