Native javascript achieves image carousel Effect

[Instance demo]

A few days ago, I used jquery to make a js image carousel effect. Now I use the native JavaScript code to implement the same function. When I use it for practice, I am not very satisfied with the code. Seeing the effect of the Javascript imitation QQ sliding menu written by bluedream on his blog, the code is really elegant. The difference is highlighted. I will steal the essence of his code next time.

[Principles]

HTML and CSS are the same as those in jquery for image carousel. There are several common functions that are gradually displayed and gradually lost. They are implemented using closures. The logic of the subject is very general.

[Program source code]

Paste several public functions for calculation, fadein, fade-in, fadeout, and fade-out.

Code

Function ID (name) {return document. getelementbyid (name );}
// Traverse Function
Function each (ARR, callback ){
If (ARR. foreach) {arr. foreach (callback );}
Else {for (var I = 0, len = arr. length; I <len; I ++) callback. call (this, arr [I], I, arr );}
}
Function fadeIn (elem ){
SetOpacity (elem, 0)
For (var I = 0; I <20; I ++ ){
(Function (){
Var pos = I * 5;
SetTimeout (function (){
SetOpacity (elem, pos)
}, I * 25 );
}) (I );
}
}
Function fadeOut (elem ){
For (var I = 0; I <= 20; I ++ ){
(Function (){
Var pos = 100-I * 5;
SetTimeout (function (){
SetOpacity (elem, pos)
}, I * 25 );
}) (I );
}
}
// Set transparency
Function setOpacity (elem, level ){
If (elem. filters ){
Elem. style. filter = "alpha (opacity =" + level + ")";
} Else {
Elem. style. opacity = level/100;
}
}

[Call method]

// Count: number of images, wrapid: div of the wrapped image, ulid: button Div, infoid: Information bar

Babyzone. Scroll (count, wrapid, ulid, infoid );

Babyzone. Scroll (4, "banner_list", "list", "banner_info ");

[Source code download]

Click to download

Native JavaScript achieves image carousel Effect

Oak hut

From nation