Home > Developer > JavaScript
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 and shared it with everyone.
Look at the code.
Copy codeThe Code is as follows:
Sx. activex. imagefade = {
Init: function (imga, fadeint, fadeoutt ){
Var ti = new Array ();
For (var I = 0; 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 A [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]);
}
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;
}
}
Called html
Copy codeThe Code is as follows:
<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 ();
</Script>
</Body>
</Html>
The first parameter of the above js function is an array composed of the address of the image you want, the second parameter is the timer of the image fade-out, and the third parameter is the timer of the fade-in.
The key to this js section is the code a [I]. onclick. Note that two setintertval values are applied here and closure is used. Be careful when assigning values.
Please contact me if you have any questions.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
