Examples of automatic or manual switching of native javascript images with demo source code _ javascript skills

Automatic or manual switching of images will surely be seen in many places. This article will introduce the focus chart switching implemented by using native javascript. If you are interested, refer to the next section,

Ii. html code

The Code is as follows:

• 1


• 2


• 3

Iii. Source Code

The Code is as follows:

Var $ = function (id ){
Return "string" = typeof id? Document. getElementById (id): id;
};

Var Class = {
Create: function (){
Return function (){
This. initialize. apply (this, arguments );
}
}
}

Object. extend = function (destination, source ){
For (var property in source ){
Destination [property] = source [property];
}
Return destination;
}

Var TransformView = Class. create ();
TransformView. prototype = {
// Container object, sliding object, switching parameter, and switching quantity
Initialize: function (container, slider, parameter, count, options ){
If (parameter <= 0 | count <= 0) return;
Var oContainer = $ (container), oSlider = $ (slider), oThis = this;

This. Index = 0; // current Index

This. _ timer = null; // timer
This. _ slider = oSlider; // sliding object
This. _ parameter = parameter; // switch parameters
This. _ count = count | 0; // Number of switches
This. _ target = 0; // target parameter

This. SetOptions (options );

This. Up = !! This. options. Up;
This. Step = Math. abs (this. options. Step );
This. Time = Math. abs (this. options. Time );
This. Auto = !! This. options. Auto;
This. Pause = Math. abs (this. options. Pause );
This. onStart = this. options. onStart;
This. onFinish = this. options. onFinish;

OContainer. style. overflow = "hidden ";
OContainer. style. position = "relative ";

OSlider. style. position = "absolute ";
OSlider. style. top = oSlider. style. left = 0;
},
// Set the default attribute
SetOptions: function (options ){
This. options = {// Default Value
Up: true, // whether to go Up (otherwise, to the left)
Step: 5, // sliding Change Rate
Time: 10, // sliding Delay
Auto: true, // whether to convert automatically
Pause: 2000, // Pause time (valid when Auto is true)
OnStart: function () {}, // executed when the conversion starts
OnFinish: function () {}// executed when the conversion is completed
};
Object. extend (this. options, options || {});
},
// Start switch settings
Start: function (){
If (this. Index <0 ){
This. Index = this. _ count-1;
} Else if (this. Index> = this. _ count) {this. Index = 0 ;}

This. _ target =-1 * this. _ parameter * this. Index;
This. onStart ();
This. Move ();
},
// Move
Move: function (){
ClearTimeout (this. _ timer );
Var oThis = this, style = this. Up? "Top": "left ",
INow = parseInt (this. _ slider. style [style]) | 0,
IStep = this. GetStep (this. _ target, iNow );

If (iStep! = 0 ){
This. _ slider. style [style] = (iNow + iStep) + "px ";
This. _ timer = setTimeout (function () {oThis. Move () ;}, this. Time );
} Else {
This. _ slider. style [style] = this. _ target + "px ";
This. onFinish ();
If (this. Auto) {this. _ timer = setTimeout (function () {oThis. Index ++; oThis. Start () ;}, this. Pause );}
}
},
// Get the step size
GetStep: function (iTarget, iNow ){
Var iStep = (iTarget-iNow)/this. Step;
If (iStep = 0) return 0;
If (Math. abs (iStep) <1) return (iStep> 0? 1:-1 );
Return iStep;
},
// Stop
Stop: function (iTarget, iNow ){
ClearTimeout (this. _ timer );
This. _ slider. style [this. Up? "Top": "left"] = this. _ target + "px ";
}
};

Window. onload = function (){
Function Each (list, fun ){
For (var I = 0, len = list. length; I <len; I ++) {fun (list [I], I );}
};

Var objs = $ ("idNum2"). getElementsByTagName ("li ");

Var TV = new TransformView ("idTransformView2", "idSlider2", 408, 3 ,{
OnStart: function () {Each (objs, function (o, I) {o. className = TV. Index = I? "On": "" ;}}, // button style
Up: false
});

TV. Start ();

Each (objs, function (o, I ){
O. onmouseover = function (){
O. className = "on ";
TV. Auto = false;
TV. Index = I;
TV. Start ();
}
O. onmouseout = function (){
O. className = "";
TV. Auto = true;
TV. Start ();
}
})
}

The code will not be detailed!
Demo and Source File Download