Tip: You can modify some of the code before running
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title> ldh_web_editor </title> < Meta http-equiv= "Content-type" content= "text/html;" charset=gb2312 "> <link href=" mfx.css "rel=" stylesheet "type=" Text/css "> <script src=" mfx.js "></ Script> <style> #box {border:1px solid #9599A5; Background: #C4C7D3; width:628px; height:150px; } #imgPanel {height:100px; position:relative; Overflow:hidden; Z-index:1; } #ctrlPanel {border:1px solid #aaa; Background: #fff; height:30px; margin:5px; padding:5px; position:relative; z-index:0; } img{Position:absolute; padding:5px; Background: #fff; border:1px solid #999; bottom:0px; left:-999px; width:200px; } #bg {Position:absolute; width:170px; height:90px; border:1px solid #aaa; Border-bottom:none; Background: #fff; top:-91px; left:223px; } #ctRlpanel button{width:45px; line-height:20px; } #next {Position:absolute; top:5px; right:5px; } #adTilte {Position:absolute; top:8px; left:100px; Color: #CC0000; font-size:20px; Font-family: Bold; </style> </pead> <body> <div id= "box" > <div id= "Imgpanel" > </div> <div I d= "Ctrlpanel" > <div id= "bg" ></div> <div id= "Adtilte" > How the Wind blows over </div> <button id= " Prev "onclick=" Bluejs.prev (); ><</button> <button id= "Next" onclick= "Bluejs.next ();" >></button> </div> </div> <script> var curcve=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; } }; bluejs={Fx: (function () {var core=function (el,style,to) {clearinterval el[' fxid_ ' +style]); var from=el[' offset ' +style.charat (0). toUpperCase () +style.slice (1)]; var set=function (x) {el.style[style]=x+ ' px '},TIME=360/10, FX = (function (from, to, timeout, S, a, p) {var c = to- From,d = Timeout,b = from; return function () {return Curcve (t,b,c,d)}}), t=0; el[' fxid_ ' +style]=setinterval (function () {T++<time?set (FX (t)): Set (To,clearinterval (el[' fxid_ ' +style])); },10); }; return function (El,set) {for (Var Id in Set) core (El,id,set[id])}; }) (), Setfx:function (Isnext) {var data=[[10,80],[112,100],[235,148],[405,100],[525,80],[-50,20],[640,20]]; for (Var i=0;i<this.pics.length;++i) {var img=this.pics[i],v=i; if (isnext&&i==0| | i>4) {img.style.left= ' -40px '; Img.style.width= ' 20px '; }; if (!isnext) {if (i==this.pics.length-1) {v=5}; if (i==4) {img.style.left= ' 645px '; Img.style.width= ' 20px '; }; }; if (i>4) continue; THIS.FX (Img,{left:data[v][0],width:data[v][1]}); }; }, Prev:function () {This.pics.push (This.pics.shift ()); This.setfx (); }, Next:function () {This.pics.unshift (This.pics.pop ()); THIS.SETFX (1); }, Init:function () {This.box=document.getelementbyid ("box"); var pics=this.box.getelementsbytagname ("IMG"); This.pics=[]; for (Var i=0;i<pics.length;++i) This.pics.push (Pics[i]); This.setfx (); } }; Window.onload = function () {bluejs.init (); SetInterval (function () {Bluejs.prev (); },2000); } </script> </body> </ptml>
Tip: You can modify some of the code before running
