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

2023-05-10 原文

lass="htmlarea">

<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 \'\') \'<p>\' A.2l("1K") \'\':(u[j]==\'22\'&&A?\'\':\'\'))) \'<1Q></1Q>\')};s.1a(\'\')};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 \'\'},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='&bull;';pre.innerHTML='&#8249;';nex.innerHTML='&#8250;';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><div id="myFocus">
 <div class="loading"><span>请稍候...</span></div>
 <ul class="pic">
<li><img src="https://resources.devmax.cn/uploads/20230510/1b150f3f5c2cb769ef2136633a4a18e9.jpg" thumb="" alt="图片1来源于网络，版权属于作者" text="图片1更详细的描述文字"></li> <li><img src="https://resources.devmax.cn/uploads/20230510/dc7b2eea88ca8d5086882c187b5efb56.jpg" thumb="" alt="版权属于作者，图片2来源于网络" text="图片2更详细的描述文字"></li> <li><img src="https://resources.devmax.cn/uploads/20230510/68920ca65860ad8c9990ffe57bd3014e.jpg" thumb="" alt="图片3来源于网络，版权属于作者" text="图片3更详细的描述文字"></li> <li><img src="https://resources.devmax.cn/uploads/20230510/6dbef13b1cf6b62578aab2e9872ffa0a.jpg" thumb="" alt="版权属于作者，图片4来源于网络" text="图片4更详细的描述文字"></li> <li><img src="https://resources.devmax.cn/uploads/20230510/f5cc939a230656ddbecaf73569aead85.jpg" thumb="" alt="图片5来源于网络，版权属于作者" text="图片5更详细的描述文字"></li> </ul>
</div>

[Ctrl A 全选注:引入外部Js需再刷新一下页面才能执行]

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

一款双向无缝+按钮定位的焦点图实现代码的更多相关文章

jQuery焦点图轮播插件KinSlideshow用法分析

这篇文章主要介绍了jQuery焦点图轮播插件KinSlideshow用法,结合实例形式较为详细的分析了jQuery焦点图轮播插件KinSlideshow的参数含义与使用方法,需要的朋友可以参考下
jQuery焦点图轮播效果实现方法

这篇文章主要介绍了jQuery焦点图轮播效果实现方法,结合实例形式简单分析了jQuery实现焦点图轮播效果的核心代码与相关操作技巧,需要的朋友可以参考下
jQuery实现带水平滑杆的焦点图动画插件

这是一款很实用的jQuery焦点图动画插件，跟其他jQuery焦点图插件不同的是，它带有一个水平的滑杆，你可以通过滑动滑杆实现图片的切换，也可以通过点击图片来切换
一款双向无缝+按钮定位的焦点图实现代码

做这个焦点图弄了大个晚上，感觉挺晕的~发上来给大家踩一下吧双向无缝的原理很简单实现起来也不难，主要头痛的是在前后无缝与按钮定位之间的配合问题，不过还好现在总算OK了。
酷炫jQuery全屏3D焦点图动画效果

这篇文章主要介绍了一款非常酷炫的jQuery全屏3D焦点图动画效果其特点是整个焦点图基本是全屏显示的，非常大气，感兴趣的小伙伴们可以参考一下
基于jquery实现轮播焦点图插件

这篇文章主要为大家详细介绍了基于jquery实现轮播焦点图插件，具有一定的参考价值，代码很详细，感兴趣的小伙伴们可以参考一下
3种不同方式的焦点图轮播特效分享

焦点图轮播的效果我们总会看见过，本文整理了3中看似还不错的焦点图轮播效果，有需要的朋友可以参考下
jQuery实现的自适应焦点图效果完整实例

这篇文章主要介绍了jQuery实现的自适应焦点图效果,结合完整实例形式分析了jQuery事件响应及动态操作页面元素属性的相关技巧,需要的朋友可以参考下
jQuery实现的左右移动焦点图效果

这篇文章主要介绍了jQuery实现的左右移动焦点图效果,涉及jQuery结合时间函数响应鼠标事件动态操作页面元素样式的相关技巧,需要的朋友可以参考下
jQuery焦点图左右转换效果

这篇文章主要为大家详细介绍了jQuery焦点图左右转换效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

随机推荐

js中‘!.’是什么意思
Vue如何指定不编译的文件夹和favicon.ico

这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
基于JavaScript编写一个图片转PDF转换器

本文为大家介绍了一个简单的 JavaScript 项目，可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片，只需点击一下即可将其转换为 PDF 文件，感兴趣的可以动手尝试一下
jquery点赞功能实现代码点个赞吧!

点赞功能很多地方都会出现，如何实现爱心点赞功能，这篇文章主要为大家详细介绍了jquery点赞功能实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
AngularJs上传前预览图片的实例代码

使用AngularJs进行开发，在项目中，经常会遇到上传图片后，需在一旁预览图片内容，怎么实现这样的功能呢？今天小编给大家分享AugularJs上传前预览图片的实现代码，需要的朋友参考下吧
JavaScript面向对象编程入门教程

这篇文章主要介绍了JavaScript面向对象编程的相关概念，例如类、对象、属性、方法等面向对象的术语，并以实例讲解各种术语的使用，非常好的一篇面向对象入门教程,其它语言也可以参考哦
jQuery中的通配符选择器使用总结

通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下
javascript 动态调整图片尺寸实现代码

在自己的网站上更新文章时一个比较常见的问题是：文章插图太宽，使整个网页都变形了。如果对每个插图都先进行缩放再插入的话，太麻烦了。
jquery ajaxfileupload异步上传插件

这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
React学习之受控组件与数据共享实例分析

这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下