JavaScript code example for image slide Switching

This article mainly introduces the sample code for JavaScript to implement image slide switching, including the sliding time and switching quantity, for more information, see. Suppose we have one to five bmp images. The core code for controlling the image display 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》

It mainly reflects the idea of switching an image and can be used in various scenarios. Let's look at a complicated implementation, an example of how to implement the sliding Switching Effect of an image, such as sliding and pausing events:

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];} return 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 functio N () {return fun. apply (object, args. concat (Array. prototype. slice. call (arguments);} 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-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) + B;} else if (t <(2/2. 75) {return c * (7.5625 * (t-= (1.5/2.75) * t +. 75) + 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, slide object, switch quantity var SlideTrans = function (container, slider, count, options) {this. _ slider = (slider); this. container = (container); // container object this. _ timer = null; // timer this. _ count = Math. abs (count); // Number of switches this. _ target = 0; // the target value this. _ t = this. _ B = this. _ c = 0; // The 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 setting 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 the default property SetOptions: function (options) {this. options = {// default Vertical: true, // whether the Vertical direction (direction cannot be changed) Auto: true, // whether to automatically Change: 0, // Change the amount of Duration: 30, // sliding duration Time: 10, // sliding delay Pause: 3000, // Pause Time (effective when Auto is true) onStart: function (){}, // execute onFinish: function () {}when starting the conversion, // execute Tween: Tween when the conversion is completed. quart. easeOut // tween operator}; Extend (this. options, option S | {}) ;}, // start to switch Run: function (index) {// modify indexindex = 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: function () {clearTimeout (this. _ timer); // 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) ;}}, // move to MoveTo: function (I) {this. _ slider. style [this. _ css] = I + "px" ;}, // Next: function () {this. run (++ this. index) ;}, // The Previous: function () {this. run (-- this. index) ;}, // Stop: function () {clearTimeout (this. _ timer); this. moveTo (this. _ target );}};