<style type="text/css">.ss{border:1px solid #000000;height:100px;width:100px;position:absolute;left:100px;top:240px;z-index:1;border:1px solid #FFFFFF;}</style><body style="background-color:#000000;color:#FFFFFF; font-size:12px;"><div>循环播放<input id='a1' value="确定" type="button" onClick="cycle(this)" disabled="disabled"></div><div>键盘操作(left,rigth键====>‘→’‘←’)<input id='a2' value="确定" type="button" onClick="keyboard(this)"></div><script>Array.prototype.end =function(){return (this.length) ? this[this.length - 1] : null;};function $(Id){return document.getElementById(Id)};function create(elm,parent,fn){var element = document.createElement(elm);parent.appendChild(element);if(fn)fn(element);};var CurrentStyle = function(element){return element.currentStyle || document.defaultView.getComputedStyle(element, null);};function foreach(arr,fn){for(var i=0;i<arr.length;i++){arr[i]=fn(arr[i])}}function parseint(elm,type){ switch(type) { case 1: return parseInt(CurrentStyle(elm).width); break; case 2: return parseInt(CurrentStyle(elm).height); break; case 3: return parseInt(CurrentStyle(elm).left); break; case 4: return parseInt(CurrentStyle(elm).top); break default: return ; }}var Tween = { Quintic:{ easeOut: function(t,b,c,d){ return c*t/d + b; } }}var extend = function() { var args = arguments; if(!args[1])args = [this,args[0]]; for(var property in args[1])args[0][property] = args[1][property]; return args[0]; }; var Class = function(properties){ var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;}; _class.prototype = properties; return _class; }; var imgswitch = new Class({ options:{ range :300, //扩大的范围; step :30, t :0, time :10, zindex :10, leftdiff:150 //图片的间距 }, initialize:function(data,dif){ var self = this; this.data = data; this.dif = dif; this.lock = false; this.timer = null; this.position = []; this.direction= true; this.current = new Array(4); this.range = this.options.range; this.step = document.all?this.options.step:this.options.step-20; this.t = this.options.t; this.time = this.options.time; this.zindex = this.options.zindex; this.leftdiff = this.options.leftdiff; for(var i=0; i<this.data.length;i++) { create('img',document.body,function(elm){ with(elm){id = self.data[i].id;className= self.data[i].className;src= self.data[i].src;style.left = parseint($(self.data[0].id),3) +i*self.leftdiff} self.position.push(parseInt(CurrentStyle(elm).left)); }) } this.original = [parseint($(this.data[0].id),1),parseint($(this.data[0].id),2),parseint($(this.data[0].id),3),parseint($(this.data[0].id),4)]; this.gap = parseint($(this.data[1].id),3)-parseint($(this.data[0].id),3); //设置最后一张图片的位置 长度 高度 var data =$(this.data.end().id); data.style.height = this.current[1] = parseint(data,2)+this.range+'px'; data.style.width = this.current[0] = parseint(data,1)+this.range+'px'; data.style.left = this.current[2] = this.position[0] +(parseint($(this.data[this.data.length-2].id),3)-parseint($(this.data[0].id),3)-this.range)/2; data.style.top = this.current[3] = parseint(data,4) - this.range/2 ; data.zIndex = this.zindex; this.position[this.position.length-1]=parseint(data,3); foreach(this.current,function(o){return o=parseInt(o) }); }, start:function(arg){; if(this.lock){return} else{this.lock ='true'} this.direction = arg; this.gap = (this.direction?Math.abs(this.gap):(-1)*(Math.abs(this.gap))) this.move(); }, fun:function(){ this.movep();this.movef();this.movel(); }, movep:function(){ var j = this.direction?(-1):0 for(var i = 1+j ; i<this.data.length-1+j; i++) {$(this.data[i].id).style.left = this.position[i] + this.moveto(this.t,0,this.gap,this.step)} }, movef:function(){ //中间的图移动 var data = $(this.data.end().id); data.style.left = this.direction?(this.position[this.position.length-1] + this.moveto(this.t,0,(this.position[0]-this.current[2]),this.step)):(this.current[2] +this.moveto(this.t,0,(this.position[this.position.length-2]-this.current[2]),this.step)) data.style.top = this.moveto(this.t,this.current[3],(this.original[3]-this.current[3]),this.step); data.style.width = this.moveto(this.t,this.current[0],(-1*this.range),this.step); data.style.height = this.moveto(this.t,this.current[1],(-1*this.range),this.step); data.style.zIndex = this.moveto(this.t,this.zindex,(1-this.zindex),this.step); }, movel:function(){ //两边的图片移动 var data = this.direction?$(this.data[this.data.length-2].id):$(this.data[0].id) data.style.left = this.direction?(this.position[this.position.length-2] + this.moveto(this.t,0,(this.current[2]-this.position[this.position.length-2]),this.step)):(this.position[0] + this.moveto(this.t,0,(this.current[2]-this.position[0]),this.step)) data.style.width = this.moveto(this.t,this.original[0],this.range,this.step); data.style.height = this.moveto(this.t,this.original[1],this.range,this.step); data.style.top = this.moveto(this.t,this.original[3],(this.current[3]-this.original[3]),this.step); data.style.zIndex = this.moveto(this.t,3,(this.zindex-1),this.step); }, move:function(){ var self = this; this.fun(); if(++this.t>this.step) { clearTimeout(this.timer);this.t=0;this.lock=false; this.direction?this.data.splice(0,0,this.data.pop()):this.data.push(this.data.shift()) } else {this.timer = setTimeout(function(){self.move()},this.time)} }, moveto:function(t,b,c,d){ return Math.round(Tween.Quintic.easeOut(t,b,c,d)); } }) var arr = [{id:'img1',className:'ss',src:'http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_1.gif'},{id:'img2',className:'ss',src:'http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_2.gif'},{id:'img3',className:'ss',src:'http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_7.gif'},{id:'img4',className:'ss',src:'http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_8.gif'},{id:'img5',className:'ss',src:'http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_10.gif'},{id:'img6',className:'ss',src:'http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_11.gif'},{id:'img7',className:'ss',src:'http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_12.gif'}]; var a = new imgswitch(arr,4000); function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)} function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)} var timer =null function cycle(obj){ obj.disabled="disabled" $('a2').disabled = '' timer = setInterval(function(){a.move()},4000) removeListener(document,'keydown',an) } function keyboard(obj){ obj.disabled="disabled" $('a1').disabled = '' clearTimeout(timer) addListener(document,'keydown',an) } function an(event){ var e = event || window.event if((e.charCode||e.keyCode)==37) {a.start(true);} if((e.charCode||e.keyCode)==39) {a.start(false);} } timer = setInterval(function(){a.move()},4000)</script></body>
