[JS] Picture Auto Switch effect (study notes)

Last seen in the downloaded Web page

JavaScript to achieve automatic image switching effect:

<style text= "Text/css" >

/* Picture scroll bar */
. container,. Container * {
margin:0;
padding:0;
}
. container {
width:1005px;
height:395px;
Float:right;
Overflow:hidden;
position:relative;
right:0px;
}
. Container UL {
Position:absolute;
}
. Slider {
Position:absolute;
top:0;
left:0;
}
. Slider Li {
List-style:none;
Display:inline;
}
. Slider img {
width:1005px;
height:395px;
Display:block;
}
. num {
Position:absolute;
right:5px;
bottom:5px;
}
. Num Li {
Float:left;
Color: #d71437;
Text-align:center;
line-height:16px;
width:16px;
height:16px;
font-family:arial;
font-size:12px;
Cursor:pointer;
Overflow:hidden;
MARGIN:3PX 1px;
border:1px solid #d71437;
Background-color: #fff;
}
. Num Li.on {
Color: #fff;
line-height:21px;
width:21px;
height:21px;
font-size:16px;
margin:0 1px;
border:0;
Background-color: #d71437;
Font-weight:bold;
}

</style>

<div class= "Container" id= "Idtransformview" style= "float:right; Overflow:hidden; position:relative; " >
<ul style= "Position:absolute; left:0px; top:0px; "class=" Slider "id=" Idslider ">
<li><a href= "#" target= "_blank" ></a></li>
<li><a href= "#" target= "_blank" ></a></li>
<li><a href= "#" target= "_blank" ></a></li>
<li><a href= "#" target= "_blank" ></a></li>
<li><a href= "#" target= "_blank" ></a></li>
</ul>
<ul class= "num" id= "Idnum" >
<li class= "on" >1</li>
<li class= "" >2</li>
<li class= "" >3</li>
<li class= "" >4</li>
<li class= "" >5</li>
</ul>
</div>
<script type= "Text/javascript" >
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, toggle parameter, toggle 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 objects
This._parameter = parameter;
Toggle Parameters
This._count = Count | | 0;
Switching quantity
This._target = 0;
Target parameters

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 default Properties
Setoptions:function (options) {
This.options = {//default value
Up:true,//whether upward (otherwise left)
Step:5,//sliding rate of change
Time:10,//sliding delay
Auto:true,//whether automatic conversion
pause:2000,//Pause time (valid when auto is true)
Onstart:function () {
},//execute at start of conversion
Onfinish:function () {
}//execution when conversion is complete
};
Object.extend (this.options, Options | | {});
},
Start Switching 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 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 it
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 = $ ("Idnum"). getElementsByTagName ("Li");

var TV = new Transformview ("Idtransformview", "Idslider", 395, 5, {
Onstart:function () {
Each (Objs, function (o, i) {
O.classname = TV. Index = = I? "On": "";
})
}//button Style
});

Rvh 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 ();
}
})

</script>

[JS] Picture Auto Switch effect (study notes)