JavaScript image switching display effect alibaba extended edition _ image effects JavaScript image switching Display Effect

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. 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.

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

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:

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:

this._slider.style[style] = (iNow + iStep) + "px"; this._timer = setTimeout(function(){ oThis.Move(); }, this.Time);

The container structure in the following example:

 
 
 
 
  
  
 
  
  
 
  
  
 
 
 
 
 
 
 
  
  
1
 
  
  
2
 
  
  
3
 
 
 
 

To be beautiful, you need to set css:

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

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.
Complete Test code in the example:

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", 168, 3, {onStart: function () {Each (objs, function (o, i) {o. className = TV. index = I? "On": "" ;}}// button style}); TV. 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 ();}})

Source code:

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, switching parameter, number of switches 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 object this. _ parameter = parameter; // switch the parameter this. _ count = count | 0; // Number of switches this. _ target = 0; // The target parameter 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 the default property SetOptions: function (options) {this. options = {// default value: Up: true, // whether to go Up (otherwise left) Step: 5, // sliding Change Rate Time: 10, // sliding delay Auto: true, // whether to automatically convert Pause: 2000, // Pause Time (effective when Auto is true) onStart: function (){}, // execute onFinish: function () {}// execute when the conversion is complete}; Object. extend (this. options, options | |{}) ;}, // Start to switch to set 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: 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) ;}}, // 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: function (iTarget, iNow) {clearTimeout (this. _ timer); this. _ slider. style [this. up? "Top": "left"] = this. _ target + "px ";}};