一款黑色风格的JS图片切换效果，代码来自奇艺

发布时间：2018-08-19 13:29:23 所属栏目：Asp教程来源：站长网

导读：一款黑色风格的图片切换效果，代码是在百度旗下奇艺视频网站整理下来的，怎么说呢！大站设计的东西就是漂亮，无论从UI视觉还是兼容性方面，都是非常棒的，个人站长调用简单方便，当然这里需要您有一定的HTML知识！示例： !DOCTYPE htmlhtml xmlns=http:

　　一款黑色风格的图片切换效果，代码是在百度旗下奇艺视频网站整理下来的，怎么说呢！大站设计的东西就是漂亮，无论从UI视觉还是兼容性方面，都是非常棒的，个人站长调用简单方便，当然这里需要您有一定的HTML知识！

　　示例：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>myFocus一款黑色风格JS焦点图，调用简单</title> <script type="text/javascript"> //引用myFocus库开始 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}('g o={$:7(Y){h 13.2z(Y)},$$:7(T,6){h(2v 6=='2m'?6:8.$(6)).19(T)},$$1j:7(T,6){g N=[],n=0,a=6.19(T);K(g i=0;i<a.P;i++){f(a[i].1Z==6)N.11(a[i]);f(a[i].19(T).P){n=a[i].19(T).P}i=i+n;n=0}h N},$I:7(6,n){h 8.$$1j('I',8.$$1j('X',6)[n])},1k:7(t,b,c,d){h c*t/d+b},2r:7(t,b,c,d){h c*(t/=d)*t*t*t+b},1T:7(t,b,c,d){h-c*((t=t/d-1)*t*t*t-1)+b},2q:7(t,b,c,d){h((t/=d/2)<1)?(c/2*t*t*t*t+b):(-c/2*((t-=2)*t*t*t-2)+b)},9:7(6,9){h(+[1,])?1c.2p(6,1L)[9]:6.2x[9]},y:7(6,v){f(v!=V){v=v>x?x:(v<0?0:v);6.9.2u="1y(E="+v+")";6.9.E=(v/x)}G h(!+[1,])?((6.1A.1y)?6.1A.1y.E:x):((6.9.E)?6.9.E*x:x)},J:7(6,L,1e,1Q,Q,H){g y=L=='E'?1m:F,1w=8.9(6,L);f(y&&6.9.1d=='1o'){6.9.1d='';8.y(6,0)}g t=0,b=y?8.y(6):2y(1w=='w'?0:1w),c=1e-b,d=1Q||2o,1i=Q||'1T',m=c>0?'2t':'2s';f(6[L+'S'])14(6[L+'S']);6[L+'S']=1z(7(){f(y&&t<d){o.y(6,1Y[m](o[1i](++t,b,c,d)))}G f(!y&&t<d){6.9[L]=1Y[m](o[1i](++t,b,c,d))+'q'}G{f(y&&1e==0){6.9.1d='1o'}14(6[L+'S']);H&&H.2l(6)}},10);h 8},2n:7(6,M,H){8.J(6,'E',x,M==V?20:M,'1k',H);h 8},2C:7(6,M,H){8.J(6,'E',0,M==V?20:M,'1k',H);h 8},2D:7(6,1s,M,1C,H){K(g p 1K 1s)8.J(6,p,1s[p],M,1C,H);h 8},2E:7(6){g J=['2B','2k','22','2w','B','A','E'];K(g i=0;i<J.P;i++)f(6[J[i]+'S'])14(6[J[i]+'S']);h 8},1v:7(p){g 12=[],R=13.1X('9');R.Q='1V/12';f(p.1r)8.1r([8.$(p.Y)],p.9+'2F');f(p.B){12.11('.'+p.9+' *{29:0;23:0;2a:0;2e-9:1o;}.'+p.9+'{25:2i;B:'+p.B+'q;A:'+p.A+'q;1l:1p;2g:2j/1.5 2c,2b,2f-2d;24:#27;}.'+p.9+' .1P{25:2h;z-k:28;B:x%;A:x%;2A:#2M;1V-3k:1J;23-22:'+0.3*p.A+'q;24:#27 3l(3g://38.37.3c/3d/3e/3b-1P.36) 1J '+0.4*p.A+'q 39-3f;}.'+p.9+' .3n{B:'+p.B+'q;A:'+p.A+'q;1l:1p;}.'+p.9+' .16 I,.'+p.9+' .16 I 1h,.'+p.9+' .16-3m{B:'+p.B+'q;A:'+p.1I+'q!1M;3h-A:'+p.1I+'q!1M;1l:1p;}')}f(R.1H){R.1H.3i=12.1g('')}G{R.W=12.1g('')}g 1t=8.$$('3j',13)[0];1t.21(R,1t.2G)},3a:7(l){f(1c.1N){(7(){34{o.$(l.Y).D=l.9;o.1v(l)}2O(e){1S(2P.2Q,0)}})();1c.1N('2R',7(){o[l.9](l)})}　　G{13.26("2N",7(){o.$(l.Y).D=l.9;o.1v(l)},F);1c.26('35',7(){o[l.9](l)},F)}},2I:7(6,u){g s=[],n=8.$I(6,0).P,1u=u.P;K(g j=0;j<1u;j++){s.11('<X 1U='+u[j]+'>');K(g i=0;i<n;i++){s.11('<I>'+(u[j]=='1u'?('<a>'+(i+1)+'</a>'):(u[j]=='16'?8.$I(6,0)[i].W.2H(/>(.|n|r)*?(</a>)/i,'>'+(8.$$('Z',6)[i]?8.$$('Z',6)[i].2J:'')+'</a>'):(u[j]=='1R'?'<Z 1W='+(8.$$('Z',6)[i].2K("1R")||8.$$('Z',6)[i].1W)+' />':'')))+'<1h></1h></I>')};s.11('</X>')};6.W+=s.1g('')},1r:7(N,u){g U=13.1X('U');U.D=u;N[0].1Z.21(U,N[0]);K(g i=0;i<N.P;i++)U.2L(N[i])},2S:7(6,u){6.W='<X 1U='+u+'>'+6.W+'</X>'},2T:7(1B,1F){h"18.30(8.$$('U',18)[0]);g O=7(17){("+1B+")();f (k == n - 1&&17==V) k = -1;g 1O = 17 != V ? 17: k + 1;("+1F+")();k=1O;};O(k);f(l.w!==F) g w=1z(7(){O()},t);18.1x=7(){f(w) 14(w);};18.1f=7(){f(w) w=1z(7(){O()},t);}"},31:7(C,Q,1a){h"K (g j=0;j<n;j++){"+C+"[j].k=j;f("+Q+"=='32'){"+C+"[j].1x=7(){f(8.D!='33') 8.D='1D'};"+C+"[j].1f=7(){f(8.D=='1D') 8.D=''};"+C+"[j].1E=7(){f(8.k!=k) {O(8.k);h F}};}G f("+Q+"=='2Z'){"+C+"[j].1x=7(){g 15=8;f("+1a+"==0){f(15.k!=k){O(15.k);h F}}G "+C+".d=1S(7(){f(15.k!=k) {O(15.k);h F}},"+(1a==V?x:1a)+")};"+C+"[j].1f=7(){2Y("+C+".d)};}G{2U('o 不支持这样的事件 "'+"+Q+"+'"');2V;}}"},2W:7(6,1q,1G){h"g 1b=F;"+6+".1E=7(){8.D=8.D=='"+1q+"'?'"+1G+"':'"+1q+"';f(!1b){14(w);w=1L;1b=1m;}G{w=1m;1b=F;}}"},2X:7(1n){K(g p 1K 1n)8[p]=1n[p]}};',62,210,'||||||obj|function|this|style||||||if|var|return|||index|par|||myFocus||px||||cla||auto|100|opa||height|width|arrStr|className|opacity|false|else|fn|li|animate|for|prop|speed|arr|run|length|type|oStyle|Timer|tag|div|undefined|innerHTML|ul|id|img||push|css|document|clearInterval|self|txt|idx|box|getElementsByTagName|delay|_stop|window|display|val|onmouseout|join|span|st|_|linear|overflow|true|fnObj|none|hidden|cla1|wrap|params|oHead|num|initCSS|offset|onmouseover|alpha|setInterval|filters|fn1|easing|hover|onclick|fn2|cla2|styleSheet|txtHeight|center|in|null|important|attachEvent|next|loading|spd|thumb|setTimeout|easeOut|class|text|src|createElement|Math|parentNode||insertBefore|top|padding|background|position|addEventListener|fff|9999|margin|border|Geneva|Verdana|serif|list|sans|font|absolute|relative|12px|right|call|object|fadeIn|50|getComputedStyle|easeInOut|easeIn|floor|ceil|filter|typeof|bottom|currentStyle|parseInt|getElementById|color|left|fadeOut|slide|stop|_wrap|firstChild|replace|addList|alt|getAttribute|appendChild|666|DOMContentLoaded|catch|arguments|callee|onload|wrapIn|switchMF|alert|break|toggle|extend|clearTimeout|mouseover|removeChild|bind|click|current|try|load|gif|zhongsou|nethd|no|setting|28236|com|wtimg|i_41956|repeat|http|line|cssText|head|align|url|bg|pic'.split('|'),0,{})) //引用myFocus库结束 myFocus.extend({ mF_qiyi:function(par){//奇艺主题风格 var box=this.$(par.id); this.addList(box,['txt','num']);this.wrap([this.$$('ul',box)[0],this.$$('ul',box)[1]],'swt'); var swt=this.$$('div',box)[1],txt=this.$li(swt,1),num=this.$li(box,0); var index=0,n=txt.length,t=par.time*1000;//运行时相关参数 //CSS var txtH=par.txtHeight=='default'?34:par.txtHeight;//设置默认的文字高度 swt.style.width=par.width*n+'px'; //PLAY eval(this.switchMF(function(){ num[index].className=''; },function(){ txt[next].style.top=0+'px';//复位 myFocus.slide(swt,{left:-par.width*next},50,'easeOut',function(){myFocus.slide(txt[next],{top:-txtH})}); num[next].className='current'; })) eval(this.bind('num','par.trigger',par.delay)); } }); //设置实例 myFocus.setting({ id:'myFocus',//焦点图ID style:'mF_qiyi',//风格样式 time:3,//切换时间间隔 trigger:'mouseover',//触发切换模式：'click'(点击)/'mouseover'(悬停) txtHeight:'default',//文字层高度设置，'default'为默认高度，0为隐藏 width:450,//图片宽(大图)，注意:整个焦点图的宽等于或大于图片宽 height:296,//图片高(大图)，注意同上 wrap:true//是否需要外套背景边框，true（是）/false（否） }); </script> <style> *{margin:0;padding:0;border:0;list-style:none;} body{background:#eee;padding:20px;} /*=========mF_qiyi --奇艺主题========*/ .mF_qiyi_wrap{position:relative;float:left;overflow:hidden;padding:6px;border:1px solid #333;background:#333 url(/uploads/common/images/201110/jsbg.jpg) no-repeat;}/*背景边框*/ .mF_qiyi .loading{padding:6px;color:#f60;background:#333 url(/uploads/common/images/201110/jsbg.jpg) center no-repeat;}/*载入画面*/ .mF_qiyi .loading span{display:block;height:140px;padding-top:70px;background:url(/uploads/common/images/201110/loading) center 100px no-repeat;} .mF_qiyi .swt{height:100%;position:absolute;overflow:hidden;} .mF_qiyi .swt .pic{height:100%;width:100%;} .mF_qiyi .swt .pic li{height:100%;float:left;} .mF_qiyi .swt .txt{width:100%;} .mF_qiyi .swt .txt li{position:relative;float:left;height:34px;line-height:34px;}/*默认标题高度*/ .mF_qiyi .swt .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_qiyi .swt .txt li span{display:block;height:100%;position:absolute;top:0;left:0;background:#000;filter:alpha(opacity=40);opacity:0.4;} .mF_qiyi .num{position:absolute;z-index:2;bottom:6px;right:12px;} .mF_qiyi .num li{float:left;width:18px;height:16px;line-height:16px;margin-left:4px;overflow:hidden;text-align:center;border:1px solid #000;background:#ccc;cursor:pointer;} .mF_qiyi .num li.current,.mF_qiyi .num li.hover{background:#f60;color:#fff;}/*当前/悬停按钮样式*/ </style> </head> <body> <div id="myFocus"> <div class="loading"><span>请稍候...</span></div> <ul class="pic"> <li><a href="#"><img src="/uploads/common/images/wall6.jpg" thumb="" alt="图片1" text="" /></a></li> <li><a href="#"><img src="/uploads/common/images/wall7.jpg" thumb="" alt="图片2" text="" /></a></li> <li><a href="#"><img src="/uploads/common/images/wall8.jpg" thumb="" alt="图片3" text="" /></a></li> <li><a href="#"><img src="/uploads/common/images/wall9.jpg" thumb="" alt="图片4" text="" /></a></li> </ul> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：淮安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!