JavaScript to implement picture sliding switch code example sharing _javascript Tips

Let's say we have 1 to 55 bmp pictures here, so the core code that controls the display of picture switching can be:

<script>
 var i=1;
 var img = new Array ();
 Img[0] = "1.bmp";
 IMG[1] = "2.bmp";
 IMG[2] = "3.bmp";
 IMG[3] = "4.bmp";
 IMG[4] = "5.bmp";
 function playimg () {
 i=i+1;
 var IMGs = document.getElementById ("img");
 IMGS.SRC =img[i];
 if (i>=4) {
 i=1
 }
 }}
 Window.onload = function () {
 document.getElementById ("img"). src= "1.bmp";
 }
</script>

Mainly embodies a picture of the switch control ideas, can be used in various scenarios, then we look at a complex implementation, to control the sliding and pause events, such as specific implementation of the sliding effect of the image of the example:

var $$ = function (ID) {return "string" = = typeof ID? document.getElementById (ID): ID; var Extend = function (destination, source) {for (var property in source) {Destination[property] = Source[property];} r
Eturn destination; var currentstyle = function (Element) {return Element.currentstyle | | Document.defaultView.getComputedStyle (ELEMENT,
NULL); var Bind = function (object, fun) {var args = Array.prototype.slice.call (arguments). Slice (2); return function () {retur
n Fun.apply (object, Args.concat (Array.prototype.slice.call (arguments)); The var ForEach = function (array, callback, Thisobject) {if (Array.foreach) {Array.foreach (callback, thisobject);}
else{for (var i = 0, len = Array.Length i < len; i++) {Callback.call (Thisobject, array[i], I, array);}}
 var Tween = {quart: {easeout:function (t,b,c,d) {return-c * ((t=t/d-1) *t*t*t-1) + B;
 }, Back: {easeout:function (t,b,c,d,s) {if (s = = undefined) s = 1.70158; Return c* ((t=t/d-1) *t* ((s+1) *t + s) + 1) +b
 }, Bounce: {easeout:function (t,b,c,d) {if (T/=d) < (1/2.75)) {return c* (7.5625*t*t) + B;
 else if (T < (2/2.75)) {return c* (7.5625* (t-= (1.5/2.75)) *t +.) + B;
 else if (T < (2.5/2.75)) {return c* (7.5625* (t-= (2.25/2.75)) *t +. 9375) + b;
 else {return c* (7.5625* (t-= (2.625/2.75)) *t +. 984375) + b; }}//Container object, sliding object, toggle quantity var Slidetrans = function (container, slider, count, options) {This._slider = (slider); This.con Tainer= (Container)//container Object This._timer = null;//Timer This._count = Math.Abs (count);//Toggle Quantity This._target = 0;//target value this._t = This._b = This._c = 0;//tween parameter this. index = 0;//Current Index this.

SetOptions (options); This. Auto =!!
This.options.Auto; This.
Duration = Math.Abs (this.options.Duration); This.
Time = Math.Abs (this.options.Time); This.
Pause = Math.Abs (This.options.Pause); This.
Tween = This.options.Tween;
This.onstart = This.options.onStart;

This.onfinish = This.options.onFinish; var bvertical =!!
this.options.Vertical; This._css = bvertical? ' Top ': ' Left ';//direction/style set 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"; This. Change = This.options.Change? This.options.change:this._slider[bvertical?
"Offsetheight": "offsetwidth"]/this._count;
};
 Slidetrans.prototype = {//Set default property Setoptions:function (options) {this.options = {//default value vertical:true,//vertical direction (direction cannot be changed) auto:true,//whether automatic change:0,//change amount duration:30,//sliding duration time:10,//Sliding delay pause:3000,//Pause time (valid when Auto is true) Onstart:fu
Nction () {},//executes the tween:tween.quart.easeout//tween operator} when the conversion is initiated onfinish:function () {},//completes the transformation; Extend (this.options, Options | |
 {}); },//Start switching run:function (index) {//fix index index = = undefined && (index = this.
Index); Index < 0 && (index = this._count-1) | |
Index >= this._count && (index = 0); Set the parameter 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;
This.onstart (); This.
 Move (); },//Move move:function () {cleartimeout (This._timer);//do not reach target continue moving otherwise proceed next slide if (this._c && this._t < this. Duration) {this. MoveTo (this. Math.Round 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). Next), this.
Pause));
 },//Move to Moveto:function (i) {THIS._SLIDER.STYLE[THIS._CSS] = i + "px"; },//Next next:function () {this. Run (++this.
 Index); },//previous previous:function () {this. Run (--this.
 Index); },//Stop stop:function () {cleartimeout (This._timer);
 MoveTo (This._target);
 }
};