[Reprint] JavaScript image sliding Switching Effect

I have seen many image players written in JavaScript on the Internet, many of which not only write code but also rely on files, such as XML. Some are implemented using flash. The biggest defect is that the browser must install flash plug-ins, which doesn't feel very good. Even if the current browser usually has flash plug-ins, the entire code is also dependent on flash, which is not good. What I saw today is really good, Master! Learning... Thank you "[Cloudgamer] -- a place that cannot be reached in the footsteps; a place where eyes cannot be reached; a dream that can be reached" (csdn account cloudgamer ).

Article from: http://www.cnblogs.com/cloudgamer/archive/2008/07/06/SlideTrans.html

For the preview effect, see the link above.

Download test code

Other image display effects:
Javascript image conversion effect (ie Only)
Javascript image slide display

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:

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:

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:

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 ):

{
Function onclick ()
{
This. style. display = 'none'; document. getelementbyid ('Code _ closed_text_213840 '). style. display = 'none'; document. getelementbyid ('Code _ open_image_213840 '). style. display = 'inline'; document. getelementbyid ('Code _ open_text_213840 '). style. display = 'inline ';
}
} "Src =" images/outliningindicators/contractedblock.gif "alt =" "width =" 11 "Height =" 16 "align =" TOP "> {
Function onclick ()
{
This. style. display = 'none'; document. getelementbyid ('Code _ open_text_213840 '). style. display = 'none'; getelementbyid ('Code _ closed_image_213840 '). style. display = 'inline'; getelementbyid ('Code _ closed_text_213840 '). style. display = 'inline ';
}
} "Src =" images/outliningindicators/expandedblockstart.gif "alt =" "width =" 11 "Height =" 16 "align =" TOP "> code
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 duration,
If the condition is not met, continue to move; otherwise, directly move to the target value and perform the next switchover:

{
Function onclick ()
{
This. style. display = 'none'; document. getelementbyid ('Code _ closed_text_214256 '). style. display = 'none'; document. getelementbyid ('Code _ open_image_214256 '). style. display = 'inline'; document. getelementbyid ('Code _ open_text_214256 '). style. display = 'inline ';
}
} "Src =" images/outliningindicators/contractedblock.gif "alt =" "width =" 11 "Height =" 16 "align =" TOP "> {
Function onclick ()
{
This. style. display = 'none'; document. getelementbyid ('Code _ open_text_214256 '). style. display = 'none'; getelementbyid ('Code _ closed_image_214256 '). style. display = 'inline'; getelementbyid ('Code _ closed_text_214256 '). style. display = 'inline ';
}
} "Src =" images/outliningindicators/expandedblockstart.gif "alt =" "width =" 11 "Height =" 16 "align =" TOP "> code
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 ));
}

 

Instructions for use

Three parameters are required for instantiation: The container object, the sliding object, and the number of switches. Then run the run method directly:

New slidetrans ("idcontainer", "idslider", 3). Run ();

There are also the following optional attributes:
Vertical: True, // whether the vertical direction is set (the direction cannot be changed)
Auto: True, // automatic or not
Change: 0, // change volume
Duration: 50, // sliding duration
Time: 10, // sliding Delay
Pause: 2000, // pause time (valid when auto is true)
Onstart: function () {}, // executed when the conversion starts
Onfinish: function () {}, // executed when the conversion is completed
TWEEN: tween. Quart. easeout // tween Operator

Vertical cannot be modified after initialization. The tween operator can be selected based on the easing effect here (three of the instances are selected ).

The following methods are also provided:
Next: switch to the next
Previous: Switch the previous one
Stop: Stop Automatic Switch
And the run mentioned above

 

The core code is as follows:

VaR slidetrans = function (container, Slider, Count, options) {<br/> This. _ slider =$ (slider); <br/> This. _ Container = $ (container); // container object <br/> This. _ timer = NULL; // timer <br/> This. _ COUNT = math. ABS (count); // Number of switches <br/> This. _ target = 0; // target value <br/> This. _ t = This. _ B = This. _ c = 0; // tween parameter </P> <p> This. index = 0; // current index </P> <p> This. setoptions (options); </P> <p> This. auto = !! This. options. auto; <br/> This. duration = math. ABS (this. options. duration); <br/> This. time = math. ABS (this. options. time); <br/> This. pause = math. ABS (this. options. pause); <br/> This. tween = This. options. tween; <br/> This. onstart = This. options. onstart; <br/> This. onfinish = This. options. onfinish; </P> <p> var bvertical = !! This. Options. Vertical; <br/> This. _ CSS = bvertical? "TOP": "Left"; // direction </P> <p> // style setting <br/> var P = currentstyle (this. _ container ). position; <br/> P = "relative" | P = "absolute" | (this. _ container. style. position = "relative"); <br/> This. _ container. style. overflow = "hidden"; <br/> This. _ slider. style. position = "absolute"; </P> <p> This. change = This. options. change? This. Options. Change: <br/> This. _ slider [bvertical? "Offsetheight": "offsetwidth"]/This. _ count; <br/>}; <br/> slidetrans. prototype = {<br/> // set the default attribute <br/> setoptions: function (options) {<br/> This. options = {// default value <br/> vertical: True, // whether the vertical direction is set (the direction cannot be changed) <br/> auto: True, // automatic or not <br/> change: 0, // change volume <br/> Duration: 50, // sliding duration <br/> time: 10, // sliding delay <br/> pause: 2000, // pause time (valid when auto is true) <br/> onstart: function (){}, // run the <br/> onfinish: Function () {}, // Executed when the conversion is completed <br/> TWEEN: tween. quart. easeout // tween operator <br/>}; <br/> extend (this. options, options | |{}); <br/>}, <br/> // start switching <br/> Run: function (INDEX) {<br/> // corrected index <br/> Index = undefined & (Index = This. index); <br/> index <0 & (Index = This. _ count-1) | index> = This. _ count & (Index = 0); <br/> // set the parameter <br/> This. _ target =-math. ABS (this. change) * (this. index = index); <br/> th Is. _ T = 0; <br/> This. _ B = parseint (currentstyle (this. _ slider) [This. Options. Vertical? "TOP": "Left"]); <br/> This. _ c = This. _ target-this. _ B; </P> <p> This. onstart (); <br/> This. move (); <br/>}, <br/> // move <br/> move: function () {<br/> cleartimeout (this. _ timer); <br/> // If (this. _ C & this. _ T <this. duration) {<br/> This. moveTo (math. round (this. tween (this. _ t ++, this. _ B, this. _ C, this. duration); <br/> This. _ timer = setTimeout (BIND (this, this. move), this. time); <br/>}else {<br/> This. moveTo (this. _ target); <br/> This. auto & (this. _ timer = setTimeout (BIND (this, this. next), this. pause); <br/>}< br/>}, <br/> // move to <br/> moveTo: function (I) {<br/> This. _ slider. style [this. _ CSS] = I + "PX"; <br/>}, <br/> // next <br/> next: function () {<br/> This. run (++ this. index); <br/>}, <br/> // previous <br/> previous: function () {<br/> This. run (-- this. index); <br/>}, <br/> // stop <br/> stop: function () {<br/> cleartimeout (this. _ timer); this. moveTo (this. _ target); <br/>}< br/> };