There are many slide effects of switching images on the webpage. They are mostly implemented in flash. Can javascript implement them? Of course, I wrote one myself, for more information about how to switch between images on the webpage, see the slides on the webpage. If they are mostly implemented in flash, can javascript implement them? Of course, I wrote one by myself, share with you
Look at the code.
The Code is as follows:
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 p = document. createElement ("p ");
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 [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]);
}
P. style. position = "absolute ";
P. style. height = "200px ";
P. style. width = "200px ";
P. appendChild (img );
Img. style. height = "100% ";
Img. style. width = "100% ";
Span. style. position = "absolute ";
Span. style. right = "10px ";
Span. style. bottom = "10px ";
P. appendChild (span );
Return p;
}
}
Called html
The Code is as follows:
Untitled Document