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

<!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(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?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;i<a.L;i++){8(a[i].2F==6)C.1a(a[i]);8(a[i].1l(16).L){n=a[i].1l(16).L}i=i+n;n=0}q C},$c:7(u,6){o 1r=6.1l(\'*\'),u=u.1Z(/\\-/g,\'\\\\-\'),29=3n 3e(\'(^|\\\\s)\'+u+\'(\\\\s|$)\'),C=[];J(o i=0,l=1r.L;i<l;i++){8(29.37(1r[i].H)){C.1a(1r[i]);2u}}q C[0]},$y:7(u,6){q 9.$$1A(\'y\',9.$c(u,6))},1R:7(t,b,c,d){q c*t/d+b},3a:7(t,b,c,d){q c*(t/=d)*t*t*t+b},25:7(t,b,c,d){q-c*((t=t/d-1)*t*t*t-1)+b},3g:7(t,b,c,d){q((t/=d/2)<1)?(c/2*t*t*t*t+b):(-c/2*((t-=2)*t*t*t-2)+b)},f:7(6,f){q(+[1,])?1q.3b(6,2x)[f]:6.3c[f]},E:7(6,v){8(v!=Y){v=v>I?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\'?(\'<a>\'+(i+1)+\'</a>\'):(u[j]==\'1d\'&&A?y[i].1e.1Z(/<A(.|\\n|\\r)*?(\\>\\<\\/a\\>)/i,A.3D+\'</a>\')+\'<p>\'+A.2l("1K")+\'</p>\':(u[j]==\'22\'&&A?\'•';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> 
<div id="myFocus"> 
<div class="loading"><span>请稍候...</span></div> 
<ul class="pic"> 
<li>如需引入外部Js需刷新才能执行]</div><BR>可随意更改大小的，里面的参数已经详细说明了，喜欢的就拿去吧

<hr>

</div>
			</div>

</div>
       
      <div class="col-md-4">
	
	
	<div class="panel panel-default">
		
		<div class="panel-heading"> <a href="/php/">PHP教程</a></div>
		<div class="list-group">
<a href="/php/1.html" class="list-group-item">PHP简介</a>
<a href="/php/8.html" class="list-group-item">PHP基本语法</a>
<a href="/php/12.html" class="list-group-item">PHP类型</a>
<a href="/php/24.html" class="list-group-item">PHP变量</a>
<a href="/php/34.html" class="list-group-item">PHP运算符</a>
<a href="/php/47.html" class="list-group-item">PHP控制结构</a>
<a href="/php/67.html" class="list-group-item">PHP函数</a>
<a href="/php/74.html" class="list-group-item">PHP类与对象</a>
<a href="/php/110.html" class="list-group-item">PHP异常处理</a>
<a href="/php/function.php" class="list-group-item">函数库分类</a>
						     
				
						
					</div>
					
	</div>
				
</div>

</div>

<div class="panel panel-default">
        <div class="panel-heading">快速导航</div>
        <div class="panel-body">
                       <a href="/list.php?id=1">PHP</a>
<a href="/list.php?id=2">MySQL</a>
<a href="/list.php?id=3">HTML</a>
<a href="/list.php?id=4">CSS</a>
<a href="/list.php?id=5">JavaScript</a>
<a href="/list.php?id=6">MSSQL</a>
<a href="/list.php?id=10">AJAX</a>

<a href="/list.php?id=14">Linux</a>
<a href="/list.php?id=17">Mac</a>
<a href="/list.php?id=7">ASP</a>
<a href="/list.php?id=11">服务器</a>

<a href="/list.php?id=15">SQL</a>
<a href="/list.php?id=16">jQuery</a>

<a href="/list.php?id=18">C#</a>
<a href="/list.php?id=19">C++</a>
<a href="/list.php?id=20">java</a>
<a href="/list.php?id=21">Android</a>
<a href="/list.php?id=22">IOS</a>
<a href="/list.php?id=23">oracle</a>
<a href="/list.php?id=24">MongoDB</a>

<a href="/list.php?id=26">SQLite</a>
<a href="http://wamp.phpstudy.net/">wamp</a>
<a href="/jiaotong/">交通频道</a>   
	<span style="display:none">

</span>
                    </div>
    </div>

<hr>

</div>

<div class="bottom">
	
	<div class="container">
   Copyright © 2016 phpStudy  | 豫ICP备2021030365号-3<script src="/images/foot.js?1"></script>
    </div>
</div>
<script src="/js/foot2.js"></script>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</body>
</html>