First need a container, set its overflow for hidden,position as relative;
The container inside also wants a sliding object, sets its position for absolute;
Initialize some of the properties in the Initialize () function.
Before switching, perform the start () function and set the
The main is to set the Index property (index) and the _target property (target value):
Copy Code code as follows:
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;
Then the move () function starts moving, and the principle moves by setting the top (or left) of the sliding object to make the move.
The effect of deceleration is to perform the Getstep () function to get the step size:
Copy Code code as follows:
var istep = (itarget-inow)/this. Step, subtract the current value by the target value and divide by a parameter,
The step in this way gets smaller as the current value is closer to the target value, and it also makes the deceleration effect.
Then add this step in the top (or left) setting and set the timer to move () until the target value is reached:
Copy Code code as follows:
This._slider.style[style] = (Inow + istep) + "px";
This._timer = settimeout (function () {othis.move ();}, this. Time);
The container structure in the following example:
Copy Code code as follows:
<div class= "Container" id= "Idtransformview" >
<ul class= "Slider" id= "Idslider" >
<li></li>
<li></li>
<li></li>
</ul>
<ul class= "num" id= "Idnum" >
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
To be beautiful, you need CSS settings:
Copy Code code as follows:
. container,. container *{margin:0; padding:0;}
. container{width:408px; height:168px; overflow:hidden;}
. Slider{position:absolute;}
. Slider li{list-style:none;display:inline;
. slider img{width:408px; height:168px; display:block;}
. slider2{width:2000px;}
. Slider2 Li{float:left;}
. num{Position:absolute; right:5px; bottom:5px;}
. Num li{
Float:left;
Color: #FF7300;
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 #FF7300;
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: #FF7300;
Font-weight:bold;
}
The setting of the style has something to do with the program, such as width and height, which is not explained here.
You can then instantiate the following:
Copy Code code as follows:
var TV = new Transformview ("Idtransformview", "Idslider", 168, 3, {
Onstart:function () {each (Objs, function (o, i) {o.classname = TV. Index = I? "On": "";})} Button style
});
There are 4 main parameters, namely container object, sliding object, toggle parameter and number of switch.
When the program is switching up and down, switch the height of the parameter switch, when the left and right switch, is the width of the switch.
The number of switches is how many switch objects, for example, the above example is 3.
The final parameters are some settings:
Properties: Default value//description
up:true,//whether up (otherwise left)
step:5,//Sliding rate of change
time:10,//Sliding delay
auto:true,//is automatically converted
pause:2000,//Pause time (valid when auto is true)
Onstart:function () {},//is performed when the conversion starts
Onfinish:function () {}//execution when conversion completes
The OnStart property is set in the example to set the style of the button at the beginning of the switch
Current 1/3 page
123 Next read the full text
