Page 1/3 of alibaba extended edition

First, you need a container to set its overflow to hidden and position to relative;
The container also needs a slide object and sets its position to absolute;
Initialize some attributes in the initialize () function.

Before switching, run the Start () function for related settings,
It mainly sets the Index and _ target attributes (target values ):
Copy codeThe Code is 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 execute the Move () function to start moving. The principle is to set the top (or left) of the moving object to make the moving effect,
To slow down, you need to execute the GetStep () function to get the step size:
Copy codeThe Code is as follows:
Var iStep = (iTarget-iNow)/this. Step; Use the target value to subtract the current value and divide it by another parameter to get the Step size,

The step size obtained in this way will become smaller and smaller as the current value approaches the target value, and it will also produce a deceleration effect,
Then add the step in the top (or left) settings, and set the timer to continue moving () until the target value is reached:
Copy codeThe Code is 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 codeThe Code is 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 to set css:
Copy codeThe Code is 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;
}

Style settings also have a certain relationship with the program. For example, width and height are not described here.
Then we can instantiate it:
Copy codeThe Code is 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
});

Here, there are four parameters: container object, sliding object, switching parameter, and switching quantity.
When the program is switching up or down, the switching parameter switching height, when switching between left and right, is the switching width.
The number of switching objects is the number of switching objects. For example, the preceding example shows three objects.
The final parameters are as follows:
Attribute: Default Value // description
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
In this example, the onStart attribute is set to set the button style at the start of the switch.