Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Effect of switching between imitation Flash images and slides</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/css">* {Margin: 0; padding: 0; border: 0; list-style: none;} body {font: 12px/1.5 Verdana, Geneva, sans-serif; background: # eee; padding: 20px;}/* = mF_liquid = */. mF_liquid {position: relative; width: Pixel px; height: 296px; overflow: hidden; font: 12px/1.5 Verdana, Geneva, sans-serif; background: # fff ;}. mF_liquid. loading {position: absolute; z-index: 9999; width: 100%; height: 100%; color: #666; text-align: center; padding-top: 90px; background: # fff url (http://www.111cn.net/blog/upload/image/20100811182618.gif) center-40px no-repeat;}/* load screen */. mF_liquid. pic li ,. mF_liquid. mod li {position: absolute; top: 0; right: 0; width: Pixel px; height: 296px; overflow: hidden ;}. mF_liquid. pic li img {position: absolute; right: 0; width: Pixel px; height: 296px;}/* the size of the image is the same as that of the focus image frame */. mF_liquid. mod li img {width: 100%; height: 100% ;}. mF_liquid. num {position: absolute; z-index: 3; bottom: 8px; right: 8px; color: #333 ;}/ * button style */. mF_liquid. num li {float: left; width: 22px; height: 18px; position: relative; line-height: 18px; border: 1px solid #196BA9; text-align: center; margin-right: 3px; cursor: pointer; background: # dedede; filter: alpha (opacity = 80); opacity: 0.8 ;}. mF_liquid. num li. current ,. mF_liquid. num li. hover {background: # 09f; color: # fff; font-weight: bold; height: 20px; line-height: 20px; top:-2px ;}</style><script type="text/javascript">Var myFocus = {// Design By Koen @ 2010.8.x // http://hi.baidu.com/koen_li//koen_lee@qq.com#:function (id) {return document. getElementById (id) ;}, $: function (tag, obj) {return (typeof obj = 'object '? Obj: this. $ (obj )). getElementsByTagName (tag) ;}, linear: function (t, B, c, d) {return c * t/d + B ;}, easeOut: function (t, B, c, d) {return-c * (t = t/D-1) * t-1) + B;}, move: function (obj, dir, val, type, spd, fn) {// displacement function. The larger the spd is, the smaller the speed is, that is, more frames are allocated. Generally, it is recommended to set var t = 0 around the dis value, B = parseInt (obj. style [dir]) | 0, c = val-B, d = spd | 50, st = type | 'linear ', m = c> 0? 'Ceil ': 'floor'; if (obj [dir + 'timer']) clearInterval (obj [dir + 'timer']); obj [dir + 'timer'] = setInterval (function () {if (t<d){obj.style[dir]=Math[m](myFocus[st](++t,b,c,d))+'px';}else {clearInterval(obj[dir+'Timer']);fn&&fn.call(obj);}},10);return this;},zoom:function(obj,attr,val,type,spd,fn){//缩放函数，参数设置同movevar t=0,b=obj['offset'+attr.replace(/^(.)/,new Function('return arguments[1].toUpperCase()'))],c=val-b,d=spd||50,st=type,m=c>0? 'Ceil ': 'floor'; if (obj [attr + 'timer']) clearInterval (obj [attr + 'timer']); obj [attr + 'timer'] = setInterval (function () {if (t<d){obj.style[attr]=Math[m](myFocus[st](++t,b,c,d))+'px';}else {clearInterval(obj[attr+'Timer']);fn&&fn.call(obj);}},10);return this;},stop:function(obj){//停止所有运动函数var animate=['left','right','top','bottom','width','height','fade'];for(var i=0;i<animate.length;i++) if(obj[animate[i]+'Timer']) clearInterval(obj[animate[i]+'Timer']);return this;},addList:function(obj,cla,arr){//生成HMTL列表部分，cla为生成列表的class，cla='txt'表示把图片alt生成其中的文字，cla='num'表示生成按钮数字var s=[],n=this.$$('li',this.$$('ul',obj)[0]).length,num=cla.length;for(var j=0;j<num;j++){s.push('<ul class='+cla[j]+'>'); For (var I = 0; I<n;i++){s.push('<li>'+ (Linoleic [j] = 'num '? (I + 1) :( linoleic [j] = 'txt '? This. $ ('Lil', obj) [I]. innerHTML. replace (// I, this. $ ('IMG ', obj) [I]. alt): '') +'</li>')}; S. push ('</ul>');}; Obj. innerHTML + = s. join ('') ;}, setting: function (par) {// Set the if (window. attachEvent) {window. attachEvent ('onload', function () {myFocus [par. style] (par)});} else {window. addEventListener ('load', function () {myFocus [par. style] (par)}, false) ;}}, // The following is the style (skin), in the format of mF_xxx (xxx is the skin name) mF_liquid: function (par) {var box = this. $ (par. id), t = par. time * 1000; // focus graph box, stay time this. addList (box, ['mod', 'num']); var PIC = this. $ ('Ul ', box) [0], MOD = this. $ ('Ul ', box) [1], BTN = this. $ ('Ul ', box) [2]; var pic = this. $ ('Lil', PIC), mod = this. $ ('Lil', MOD), btn = this. $ ('Lil', BTN); var w = pic [0]. offsetWidth, n = pic. length; MOD. innerHTML = PIC. innerHTML; for (var I = 0; I<n;i++){//初始化样式设置mod[i].style.width=w*10+'px';mod[i].style.right=w+'px';pic[i].style.zIndex=1;pic[i].style.width=0+'px';}var index = 0;//开始显示的序号box.removeChild(this.$$('div',box)[0]); btn[index].className = 'current';this.move(mod[index],'right',0,'linear',8,function(){myFocus.zoom(pic[index],'width',w,'easeOut',90);myFocus.move(this,'right',-w*9,'easeOut',90)});var run = function(idx) {myFocus.stop(mod[index]).stop(pic[index]);mod[index].style.right=w+'px'; pic[index].style.width=0+'px';btn[index].className = ''; if(index==n-1) index=-1;var N=idx!=undefined?idx:index+1;myFocus.move(mod[N],'right',0,'linear',8,function(){myFocus.zoom(pic[N],'width',w,'easeOut',90);myFocus.move(this,'right',-w*9,'easeOut',90)});btn[N].className = 'current'; index = N; }var auto=setInterval(function(){run()},t);for (var j=0;j<n;j++){btn[j].j=j;btn[j].onmouseover=function(){if(!this.className) run(this.j)}}box.onmouseover=function(){clearInterval(auto);} box.onmouseout=function(){auto=setInterval(function(){run()},t);}}};//myFocus.setting({style:'mF_liquid',//风格样式，更多风格是请留意myFocus正式版的发布id:'myFocus',//焦点图IDtime:3//每帧的停留时间，单位秒});</script></head><body><!--把下面代码加到<body>与</body>之间--><div id="myFocus" class="mF_liquid"><div class="loading">Please wait ......</div><!--载入画面--><ul class="pic"><!--内容列表--> <li></li> <li></li> <li></li> <li></li> </ul></div></body></html>
Tip: you can modify some code before running
