假设我们这里有1到5五张bmp图片，那么控制图片切换显示的核心代码可以为：

主要体现了一个图片的切换控制思路，可以用于各种场景，那么下面我们来看一个复杂一些的实现，能够控制滑动和停顿事件等具体的实现图片的滑动切换效果的例子：
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 function() { 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*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 + .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; } }}}//容器对象,滑动对象,切换数量var slidetrans = function(container, slider, count, options) {this._slider =(slider);this.container=(container);//容器对象this._timer = null;//定时器this._count = math.abs(count);//切换数量this._target = 0;//目标值this._t = this._b = this._c = 0;//tween参数this.index = 0;//当前索引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;//方向//样式设置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 = { //设置默认属性 setoptions: function(options) {this.options = {//默认值 vertical: true,//是否垂直方向（方向不能改） auto: true,//是否自动 change: 0,//改变量 duration: 30,//滑动持续时间 time: 10,//滑动延时 pause: 3000,//停顿时间(auto为true时有效) onstart: function(){},//开始转换时执行 onfinish: function(){},//完成转换时执行 tween: tween.quart.easeout//tween算子};extend(this.options, options || {}); }, //开始切换 run: function(index) {//修正indexindex == undefined && (index = this.index);index = this._count && (index = 0);//设置参数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));} }, //移动到 moveto: function(i) {this._slider.style[this._css] = i + px; }, //下一个 next: function() {this.run(++this.index); }, //上一个 previous: function() {this.run(--this.index); }, //停止 stop: function() {cleartimeout(this._timer); this.moveto(this._target); }};