图片切换效果

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