javascript實現圖片切換的幻燈片效果原始碼_圖象特效

網頁上有許多圖片切換的幻燈片效果,它們大多用flash實現,那javascript能不能實現他們呢,當然可以,我自己寫了一個,和大家一同分享

廢話少說,看程式碼

複製程式碼 程式碼如下:

sx.activex.imagef {
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 (t1img.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. style="max-width:90%";
img.style.width="100%";
span. style.position="absolute";
span.style.right="10px";
span.style.bottom="10px";
div.appendChild(span);
return div;
}
}

調用的html

複製代碼 代碼如下:

<script> <BR>var a=sx.activex.imagefade.init(["1.jpg","1 (1).jpg"],10,10) ; <BR>a.style.height="400px"; <BR>a.style.width="400px"; <BR>//a.all[1].style.backgroundColor="green"; <BR> document.body.appendChild(a); <BR></script>

上面的js函數的第一個參數是你要的圖片的位址所組成的陣列,第二個參數是圖片淡出的timer,第三個參數是淡入的timer.

這段js的關鍵是a[i].onclick這段程式碼,注意這裡套用了兩個setintertval,並用了閉包,在賦值時要當心了.
有什麼疑問的話還請多多交流啊