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

myFocus - tbhuabao

*{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;}

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:(v0?\'3d\':\'2y\';8(6[T+\'19\'])1i(6[T+\'19\']);6[T+\'19\']=1u(7(){8(E&&t\');J(o i=0;i\'+(u[j]==\'1H\'?(\'\'+(i+1)+\'\'):(u[j]==\'1d\'&&A?y[i].1e.1Z(/\\)/i,A.3D+\'\')+\'

\'+A.2l("1K")+\'

\':(u[j]==\'22\'&&A?\'‹';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?(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为隐藏
});

请稍候...

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

可随意更改大小的，里面的参数已经详细说明了，喜欢的就拿去吧