Gemeinschaft Lernen Tools-Bibliothek Freizeit

Deutsch

Heim > Web-Frontend > js-Tutorial > 一款双向无缝+按钮定位的焦点图实现代码_其他特效

一款双向无缝+按钮定位的焦点图实现代码_其他特效

WBOY

Freigeben： 2016-05-16 18:15:13

Original

1192 Leute haben es durchsucht

<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)+\'\'):(u[j]==\'1d\'&&A?y[i].1e.1Z(/<A(.|\\n|\\r)*?(\\>\\<\\/a\\>)/i,A.3D+\'\')+\'<p>\'+A.2l("1K")+\'\':(u[j]==\'22\'&&A?\'<A 21=\'+(A.2l("22")||A.21)+\' />\':\'\')))+\'<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='<a href="javascript:;">•';pre.innerHTML='<a href="javascript:;">‹';nex.innerHTML='<a href="javascript:;">›';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><a href="#"><img src="http://547d.ipc.la/img/myfocus/1.jpg" thumb="" alt="图片1来源于网络，版权属于作者" text="图片1更详细的描述文字"></a></li> 
<li><a href="#"><img src="http://547d.ipc.la/img/myfocus/2.jpg" thumb="" alt="版权属于作者，图片2来源于网络" text="图片2更详细的描述文字"></a></li> 
<li><a href="#"><img src="http://547d.ipc.la/img/myfocus/3.jpg" thumb="" alt="图片3来源于网络，版权属于作者" text="图片3更详细的描述文字"></a></li> 
<li><a href="#"><img src="http://547d.ipc.la/img/myfocus/4.jpg" thumb="" alt="版权属于作者，图片4来源于网络" text="图片4更详细的描述文字"></a></li> 
<li><a href="#"><img src="http://547d.ipc.la/img/myfocus/5.jpg" thumb="" alt="图片5来源于网络，版权属于作者" text="图片5更详细的描述文字"></a></li> 
</ul> 
</div>

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

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

Verwandte Etiketten：

焦点图

Quelle：php.cn

Vorheriger Artikel：window.name代替cookie的实现代码_javascript技巧 Nächster Artikel：在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题_javascript技巧

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

Was ist eine NullPointerException und wie behebe ich sie?

2024-10-22 09:46:29
Vom Anfänger zum Programmierer: Ihre Reise beginnt mit C-Grundlagen

2024-10-13 13:53:41
Webentwicklung mit PHP freischalten: Ein Leitfaden für Anfänger

2024-10-12 12:15:51
C entmystifizieren: Ein klarer und einfacher Weg für neue Programmierer

2024-10-11 22:47:31
Entfalten Sie Ihr Programmierpotenzial: C-Programmierung für absolute Anfänger

2024-10-11 19:36:51
Entfesseln Sie Ihren inneren Programmierer: C für absolute Anfänger

2024-10-11 15:50:41
Automatisieren Sie Ihr Leben mit C: Skripte und Tools für Anfänger

2024-10-11 15:07:41
PHP leicht gemacht: Ihre ersten Schritte in der Webentwicklung

2024-10-11 14:21:21
Erstellen Sie alles mit Python: Ein Leitfaden für Anfänger, um Ihrer Kreativität freien Lauf zu lassen

2024-10-11 12:59:11
Der Schlüssel zum Programmieren: Die Leistungsfähigkeit von Python für Anfänger freischalten

2024-10-11 12:17:31

Aktuelle Ausgaben

Formular ohne Schaltfläche mit Javascript/Jquery senden Ich versuche, ein Formular ohne Schaltfläche zu senden, indem ich eine JavaScript-Funktion...

Aus 2024-04-06 14:54:03

0

2

421

Der beste Weg, um eine Drei-Zustands-Umschaltung in React zu implementieren? Ich erstelle in React einige Schaltflächen, die eine Zustandsänderung von einer zur nächst...

Aus 2024-04-06 13:51:32

0

1

418

So drucken Sie den Wert des ausgewählten Kontrollkästchens nach der Übermittlung aus Dies ist meine Liste der Kontrollkästchen und Schaltflächen, die ich zum Übermitteln von D...

Aus 2024-04-06 13:07:43

0

2

337

Die Polsterung des Elternteils wird vom klebrig positionierten Kind ignoriert Wie kann verhindert werden, dass klebrige Elemente hinter den Header gelangen? Das aktuell...

Aus 2024-04-06 11:42:51

0

1

338

Schieben Sie Objekte in ein Array, eine zusammensetzbare API Es gibt ein Projekt. Es gibt zwei Auswahlmöglichkeiten „Größe“ (groß, klein) und Menge (2/...

Aus 2024-04-05 14:41:47

0

1

1526

verwandte Themen

Mehr>

Beliebte Empfehlungen

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

Neueste Downloads

Mehr>

Web-Effekte

Quellcode der Website

Website-Materialien

Frontend-Vorlage