一款黑色风格JS焦点图，调用简单

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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" />
<base href="http://hi.baidu.com/koen_li" />
<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(//ku.shouce.ren/files/images/201601/56a34b25b4d49.jpg) no-repeat;}/*背景边框*/
.mF_qiyi .loading{padding:6px;color:#f60;background:#333 url(//ku.shouce.ren/files/images/201601/56a34b25b4d49.jpg) center no-repeat;}/*载入画面*/
.mF_qiyi .loading span{display:block;height:140px;padding-top:70px;background:url(" thumb="" alt="图片1" text="" /></a></li>
        <li><a href="#"><img src="//ku.shouce.ren/files/images/201601/56a34a1ed05a6.jpg" thumb="" alt="图片2" text="" /></a></li>
        <li><a href="#"><img src="//ku.shouce.ren/files/images/201601/56a34a1f8e441.jpg" thumb="" alt="图片3" text="" /></a></li>
        <li><a href="#"><img src="//ku.shouce.ren/files/images/201601/56a34a21806d6.jpg" thumb="" alt="图片4" text="" /></a></li>
    </ul>
</div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

一款黑色风格JS焦点图，调用简单

分类

图片代码

描述

一款黑色风格JS焦点图，调用简单，从奇艺网上的flash焦点图得到灵感，尝试做了一个类似的风格，感觉还不错，分享给大家.可同时调用多个实例，可以随意增删图片(自动增加相应的按钮)、随意更改大孝随意更改样式等等,兼容所有主流浏览器。