一款双向无缝+按钮定位的焦点图实现代码

<！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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>myFocus - tbhuabao</title> <style type="text/css"> *{margin:0;padding:0;border:0;list-style:none;} body{background:#fff;padding:20px;} /*=========mF_tbhuabao========*/ .mF_tbhuabao {background:#ddd;border:10px solid #333;overflow:visible;} .mF_tbhuabao .pic,.mF_tbhuabao .win{position:absolute;top:0;left:0;overflow:hidden;} .mF_tbhuabao .pic li{position:relative;float:left;overflow:hidden;} .mF_tbhuabao .txt li{position:absolute;z-index:2;width:100%;height:38px;line-height:38px;display:none;}/*默认标题高度*/ .mF_tbhuabao .txt li a{display:block;position:relative;z-index:1;color:#fff;padding-left:16px;font-size:14px;font-weight:bold;text-decoration:none;}/*标题样式*/ .mF_tbhuabao .txt li span{display:block;height:100%;position:absolute;top:0;left:0;background:#000;filter:alpha（opacity=30）;opacity:0.3;} .mF_tbhuabao .dot{position:absolute;bottom:0;left:0;height:32px;line-height:28px;width:100%;text-align:center;} .mF_tbhuabao .dot li{display:inline;margin:0 3px;} .mF_tbhuabao .dot li a{color:#999;font-size:26px;text-decoration:none;} .mF_tbhuabao .dot li.current a{color:#f60;} .mF_tbhuabao .prev,.mF_tbhuabao .next{font:700 53px/58px arial;width:37px;height:65px;overflow:hidden;position:absolute;z-index:4;left:-20px;cursor:pointer;background:url（http://547d.ipc.la/img/myfocus/btn-bg.gif） no-repeat;} .mF_tbhuabao .next{left:auto;right:-20px;} .mF_tbhuabao .prev a,.mF_tbhuabao .next a{display:block;color:#bbb;text-align:center;text-decoration:none;} .mF_tbhuabao .prev a:hover,.mF_tbhuabao .next a:hover{color:#f60;} </style> <script type="text/javascript"> eval（function（p,a,c,k,e,d）{e=function（c）{return（c35？String.fromCharCode（c+29）:c.toString（36））};if（！"".replace（/^/,String））{while（c--）{d[e（c）]=k[c]||e（c）}k=[function（e）{return d[e]}];e=function（）{return"\w+"};c=1};while（c--）{if（k[c]）{p=p.replace（new RegExp（"\b"+e（c）+"\b","g"）,k[c]）}}return p}（"o B={$:7（1h）{q 1k.3i（1h）},$$:7（16,6）{q（28 6=="33"？6:9.$（6））.1l（16）},$$1A:7（16,6）{o C=[],n=0,a=6.1l（16）;J（o i=0;iI？I:（v<0？0:v）;6.f.39="1B（N="+v+"）";6.f.N=（v/I）}P q（！+[1,]）？（（6.2a.1B）？6.2a.1B.N:I）:（（6.f.N）？6.f.N*I:I）},R:7（6,T,1j,24,U,O）{o E=T=="N"？1s:D,1x=9.f（6,T）,27=28 1j==="38";8（E&&9.f（6,"1o"）=="1U"）{6.f.1o="34";9.E（6,0）}o t=0,b=E？9.E（6）:2n（1x=="G"？0:1x）,c=27？1j/1:1j-b,d=24||36,1W=U||"25",m=c>0？"3d":"2y";8（6[T+"19"]）1i（6[T+"19"]）;6[T+"19"]=1u（7（）{8（E&&t<d）{B.E（6,1J[m]（B[1W]（++t,b,c,d）））}P 8（！E&&t<d）{6.f[T]=1J[m]（B[1W]（++t,b,c,d））+"x"}P{8（E&&1j==0）{6.f.1o="1U"}1i（6[T+"19"]）;O&&O.3m（6）}},10）;q 9},3k:7（6,F,O）{9.R（6,"N",I,F==Y？20:F,"1R",O）;q 9},3j:7（6,F,O）{9.R（6,"N",0,F==Y？20:F,"1R",O）;q 9},2p:7（6,1M,F,26,O）{J（o p 2G 1M）9.R（6,p,1M[p],F,26,O）;q 9},3o:7（6）{o R=["1v","2H","23","31","K","S","N"];J（o i=0;i<R.L;i++）8（6[R[i]+"19"]）1i（6[R[i]+"19"]）;q 9},1D:7（p）{o 17=[],h=p.S||2Q,14=1k.2J（"f"）;14.U="1K/17";8（p.1z）9.1z（[9.$（p.1h）],p.f+"2N"）;8（p.17！==D）17.1a（"."+p.f+" *{2M:0;2b:0;2K:0;2L-f:1U;}."+p.f+"{1L:2h;K:"+p.K+"x;S:"+h+"x;1Y:1T;2Y:2Z/1.5 2R,2X,2W-2S;2c:#2i;}."+p.f+" .1N{1L:2T;z-k:2U;K:I%;S:I%;2V:#3l;1K-3p:2j;2b-23:"+0.3*h+"x;2c:#2i 3U（3V://3W.3X.3T/3Z/3O/3P-1N.3Q） 2j "+0.4*h+"x 3Y-43;}."+p.f+" .41{1L:2h;K:"+p.K+"x;S:"+h+"x;1Y:1T;}."+p.f+" .1d y,."+p.f+" .1d y 1Q,."+p.f+" .1d-3S{K:"+p.K+"x;S:"+p.2g+"x！2d;3M-S:"+p.2g+"x！2d;1Y:1T;}."+p.f+" .1d y p a{1o:3y;}"）;8（14.2e）{14.2e.3z=17.1F（""）}P{14.1e=17.1F（""）}o 1y=9.$$（"3v",1k）[0];1y.2I（14,1y.3r）},3s:7（w）{8（1q.2f）{（7（）{3t{B.$（w.1h）.H+=" "+w.f;B.1D（w）}3A（e）{2t（3B.3I,0）}}）（）;1q.2f（"3J",7（）{B[w.f]（w）}）}  P{1k.2k（"3K",7（）{B.$（w.1h）.H+=" "+w.f;B.1D（w）},D）;1q.2k（"3H",7（）{B[w.f]（w）},D）}},3G:7（6,u）{o s=[],X=9.$$（"X",6）[0],y=9.$$1A（"y",X）,A,n=y.L,1H=u.L;J（o j=0;j<1H;j++）{s.1a（"<X 2C="+u[j]+">"）;J（o i=0;i<n;i++）{A=9.$$（"A",y[i]）[0];s.1a（"<y>"+（u[j]=="1H"？（""+（i+1）+""）:（u[j]=="1d"&&A？y[i].1e.1Z（/\<\/a\>）/i,A.3D+""）+""+A.2l（"1K"）+"<br/>":（u[j]=="22"&&A？"":""）））+"<1Q></1Q></y>"）};s.1a（"</X>"）};6.1e+=s.1F（""）},1z:7（C,u）{o 1c=1k.2J（"1c"）;1c.H=u;C[0].2F.2I（1c,C[0]）;J（o i=0;i<C.L;i++）1c.3F（C[i]）},3E:7（6,u）{6.1e="<X 2C="+u+">"+6.1e+"</X>"},3C:7（2A,2q,2E,d）{q"o 1G=9.$c（"1N",1g）,W="+2E+",11=1s,1b="+d+"||"1v",1m=1b=="1v"||V=="2H"？w.K:w.S;8（W）{1C.f[1b]=-1m*n+"x";k+=n;}8（1G）1g.3L（1G）;o Q=7（13）{（"+2A+"）（）;8（W&&k==2*n-1&&11！=1）{1C.f[1b]=-（n-1）*1m+"x";k=n-1}8（W&&k==0&&11！=2）{1C.f[1b]=-n*1m+"x";k=n}8（！W&&k==n-1&&13==Y）k=-1;8（W&&13！==Y&&k>n-1&&！11） 13+=n;o Z=13！==Y？13:k+1,1w=k;（"+2q+"）（）;k=Z;11=D;};Q（k）;8（w.G！==D）o G=1u（7（）{Q（）},t）;1g.1I=7（）{8（G）1i（G）};1g.1X=7（）{8（G）G=1u（7（）{Q（）},t）};"},3q:7（M,U,1n）{q"J （o j=0;j<n;j++）{"+M+"[j].k=j;8（"+U+"=="3u"）{"+M+"[j].1I=7（）{8（9.H！="3N"） 9.H="2s"};"+M+"[j].1X=7（）{8（9.H=="2s"） 9.H=""};"+M+"[j].1p=7（）{8（9.k！=k） {Q（9.k）;q D}};}P 8（"+U+"=="3x"）{"+M+"[j].1I=7（）{o 1f=9;8（"+1n+"==0）{8（1f.k！=k）{Q（1f.k）;q D}}P "+M+".d=2t（7（）{8（1f.k！=k） {Q（1f.k）;q D}},"+（1n==Y？I:1n）+"）};"+M+"[j].1X=7（）{3w（"+M+".d）};}P{42（"40 3R : \""+"+U+"+"\""）;2u;};J（o i=0,1P=9.$$（"a",1g）,2v=1P.L;i<2v;i++） 1P[i].32=7（）{9.2P（）;}}"},2O:7（6,1O,2w）{q"o 1t=D;"+6+".1p=7（）{9.H=9.H==""+1O+""？""+2w+"":""+1O+"";8（！1t）{1i（G）;G=2x;1t=1s;}P{G=1s;1t=D;}}"},3h:7（6,V,2z,1V,F）{q"o 15={},12="+2z+",2m=1J.2y（"+1V+"/2）,2B=2n（"+6+".f["+V+"]）||0,18=Z>=n？Z-n:Z,2r="+F+"||30,2o=12*（n-"+1V+"）,1S=12*18+2B;8（1S>12*2m&&18！==n-1） 15["+V+"]="-"+12;8（1S<12&&18！==0） 15["+V+"]="+"+12;8（18===n-1） 15["+V+"]=-2o;8（18===0） 15["+V+"]=0;B.2p（"+6+",15,2r）;"},35:7（1w,Z）{q 1w+".1p=7（）{11=1;Q（k>0？k-1:n-1）;};"+Z+".1p=7（）{11=2;o 2D=k>=2*n-1？n-1:k;Q（k==n-1&&！W？0:2D+1）;}"},3f:7（1E）{J（o p 2G 1E）9[p]=1E[p]}}",62,252,"||||||obj|function|if|this||||||style|||||index||||var||return||||cla||par|px|li||img|myFocus|arr|false|opa|speed|auto|className|100|for|width|length|arrStr|opacity|fn|else|run|animate|height|prop|type|dir|less|ul|undefined|next||_turn|scDis|idx|oStyle|scPar|tag|css|scIdx|Timer|push|_dir|div|txt|innerHTML|self|box|id|clearInterval|val|document|getElementsByTagName|_dis|delay|display|onclick|window|tags|true|_stop|setInterval|left|prev|offset|oHead|wrap|_|alpha|pics|initCSS|fnObj|join|ld|num|onmouseover|Math|text|position|params|loading|cla1|lk|span|linear|scD|hidden|none|sn|st|onmouseout|overflow|replace||src|thumb|top|spd|easeOut|easing|am|typeof|reg|filters|padding|background|important|styleSheet|attachEvent|txtHeight|relative|fff|center|addEventListener|getAttribute|scN|parseInt|scMax|slide|fn2|scSpd|hover|setTimeout|break|ln|cla2|null|floor|dis|fn1|scDir|class|tIdx|isless|parentNode|in|right|insertBefore|createElement|border|list|margin|_wrap|toggle|blur|296|Verdana|serif|absolute|9999|color|sans|Geneva|font|12px||bottom|onfocus|object|block|turn|50|test|string|filter|easeIn|getComputedStyle|currentStyle|ceil|RegExp|extend|easeInOut|scroll|getElementById|fadeOut|fadeIn|666|call|new|stop|align|bind|firstChild|setting|try|click|head|clearTimeout|mouseover|inline|cssText|catch|arguments|switchMF|alt|wrapIn|appendChild|addList|load|callee|onload|DOMContentLoaded|removeChild|line|current|i_41956|28236|gif|Setting|bg|com|url|http|nethd|zhongsou|no|wtimg|Error|pic|alert|repeat".split（"|"）,0,{}））; myFocus.extend（{//*********************tbhuabao****************** mF_tbhuabao:function（par）{var box=this.$（par.id）;this.addList（box,["dot","txt","prev","next"]）;this.wrap（[this.$c（"pic",box）],"win"）;var pics=this.$c（"pic",box）,dot=this.$li（"dot",box）,txt=this.$li（"txt",box）,pre=this.$c（"prev",box）,nex=this.$c（"next",box）;var index=0,n=txt.length,t=par.time*1000;pics.innerHTML+=pics.innerHTML;for（var i=0;i<n;i++）dot[i].innerHTML="•";pre.innerHTML="‹";nex.innerHTML="›";var win=this.$c（"win",box）,pic=this.$li（"pic",box）,dots=this.$c（"dot",box）,dotH=32,arTop=par.height/2-32;box.style.height=par.height+dotH+"px";win.style.cssText="width:"+par.width+"px;height:"+par.height+"px;";pics.style.width=par.width*2*n+"px";for（var i=0;i<n;i++）{txt[i].style.bottom=dotH+"px"}for（var i=0;i<2*n;i++）pic[i].style.cssText="width:"+par.width+"px;height:"+par.height+"px;";pre.style.cssText=nex.style.cssText="top:"+arTop+"px;";eval（this.switchMF（function（）{txt[index>=n？（index-n）:index].style.display="none";dot[index>=n？（index-n）:index].className=""},function（）{myFocus.slide（pics,{left:-par.width*next}）;txt[next>=n？（next-n）:next].style.display="block";dot[next>=n？（next-n）:next].className="current"},"true"））;eval（this.bind（"dot",""click""））;eval（this.turn（"pre","nex"））} }）; myFocus.setting（{ id:"myFocus",//焦点图ID style:"mF_tbhuabao",//风格样式 time:3,//切换时间间隔（秒） trigger:"click",//触发切换模式："click"（点击）/"mouseover"（悬停） width:450,//设置宽度（主图区） height:296,//设置高度（主图区） txtHeight:"default"//文字层高度设置，"default"为默认高度，0为隐藏 }）; </script> </head> <body><span>请稍候...</span> <ul class="pic"> <li><img src="http://547d.ipc.la/img/myfocus/1.jpg" thumb="" alt="图片1来源于网络，版权属于作者" text="图片1更详细的描述文字" /></li> <li><img src="http://547d.ipc.la/img/myfocus/2.jpg" thumb="" alt="版权属于作者，图片2来源于网络" text="图片2更详细的描述文字" /></li> <li><img src="http://547d.ipc.la/img/myfocus/3.jpg" thumb="" alt="图片3来源于网络，版权属于作者" text="图片3更详细的描述文字" /></li> <li><img src="http://547d.ipc.la/img/myfocus/4.jpg" thumb="" alt="版权属于作者，图片4来源于网络" text="图片4更详细的描述文字" /></li> <li><img src="http://547d.ipc.la/img/myfocus/5.jpg" thumb="" alt="图片5来源于网络，版权属于作者" text="图片5更详细的描述文字" /></li> </ul></body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
可随意更改大小的，里面的参数已经详细说明了，喜欢的就拿去吧