画像切り替え_画像特殊効果用のスライドショーエフェクトのソースコードをJavaScriptで実装

ウェブページには画像切り替え用のスライドショー効果がたくさんありますが、それらのほとんどは Flash で実装されています。もちろん、私がそれを作成してみんなに共有することもできます。

くだらない話はやめてください。 . コードを見てください

コードをコピーします コードは次のとおりです:

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= "黄色";
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"; [i].href=" javascript:void(0)";
a[i].onclick=function(r){
return function(){
var t=100; 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 );
}
},fadeoutt);
}
}(i); 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.width="100% ";
span.style.position="absolute";
span.style.right="10px";
span.style.bottom="10px";
div.appendChild(span) ;
return div;
}
}


呼び出された HTML




コードをコピーします
コードは次のとおりです。

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);
html>


上記の js 関数の最初のパラメータは、必要な画像のアドレスで構成される配列、2 番目のパラメータは画像をフェードアウトするためのタイマー、3 番目のパラメータは

この js キーはコード a[i].onclick です。ここでは 2 つの setintertval が適用され、値を割り当てるときに注意してください。ご質問がございましたら、私にご連絡ください。