Controllable switching effects of JavaScript Images

　　Tutorial on helping customers (www.bkjia.com)It feels good to see an image Switching Effect of alibaba. But there are a lot of code. If you look dizzy, come on your own. With experience in performing image slide display, it is much easier to do this. I want to re-write this effect after I wrote the Tween pause. It has been a bit of time and I can finally start it. In addition to changing to Tween easing, the program algorithm is also improved, but the principle is the same.

Let's take a look at the demo:

Default easing Method 1 Method 2

　Program description

The principle is to achieve the dynamic effect of image switching by constantly setting the left (horizontal switching) and top (vertical switching) of the sliding object.

First, you need a container. The program automatically sets the container overflow to hidden. If it is not relative or absolute, the position is set to relative at the same time,
The slide object is set to absolute positioning:

Reference content is as follows: Var p = CurrentStyle (this. _ container). position; P = "relative" | p = "absolute" | (this. _ container. style. position = "relative "); This. _ container. style. overflow = "hidden "; This. _ slider. style. position = "absolute ";

If the Change switching parameter attribute is not set, it is automatically obtained based on the sliding object:

Reference content is as follows: This. Change = this. options. Change? This. options. Change: This. _ slider [bVertical? "OffsetHeight": "offsetWidth"]/this. _ count;

When the Run method is executed, the switchover starts. An optional parameter is provided to reset the image index to be switched:

Reference content is as follows: Index = undefined & (index = this. Index ); Index <0 & (index = this. _ count-1) | index> = this. _ count & (index = 0 ); = Undefined & (index = this. Index ); Index <0 & (index = this. _ count-1) | index> = this. _ count & (index = 0 );

Then we will set the parameters required to use tween for easing,
Including _ target, _ t, _ B, and _ c ):

Reference content is as follows: This. _ target =-Math. abs (this. Change) * (this. Index = index ); This. _ t = 0; This. _ B = parseInt (CurrentStyle (this. _ slider) [this. options. Vertical? "Top": "left"]); This. _ c = this. _ target-this. _ B;

Also, Duration is a custom attribute.

After setting the parameters, execute the Move program to start moving. It is very simple. First, determine whether _ c has a value (equal to 0, indicating that it does not need to be moved) and whether _ t has reached the Duration. If not, continue to move, otherwise, move directly to the target value and perform the next switchover:

Reference content is as follows: If (this. _ c & this. _ t <this. Duration ){ This. MoveTo (Math. round (this. Tween (this. _ t ++, this. _ B, this. _ c, this. Duration ))); This. _ timer = setTimeout (Bind (this, this. Move), this. Time ); } Else { This. MoveTo (this. _ target ); This. Auto & (this. _ timer = setTimeout (Bind (this, this. Next), this. Pause )); }

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page