kinMaxShow焦点图代码jQuery轮播滚动切换特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 kinMaxShow焦点图代码jQuery轮播滚动切换特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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=gb2312" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为kinMaxShow焦点图代码（jQuery）" />
<title>kinMaxShow焦点图代码（jQuery</title>
<link type="text/css" href="css/base.css" rel="stylesheet" />
<style type="text/css">

html { height:100%; overflow:hidden; background:#fff;}
body { height:100%; overflow:hidden; background:#fff;}
.topBox { position:absolute; left:0; top:0; right:0; height:40px; background:#333; *z-index:100;}
.topBox table.layoutTab{ height:40px; width:100%;}
.mainBox { position:absolute; left:0px; top:42px; bottom:0px; right:0; overflow:hidden; background:#FFF; *z-index:10}
.mainBox iframe { width:100%; height:100%;}

html { *padding:40px 0px 0px;}
.topBox { *height:40px; *margin-top:-40px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
.mainBox { *height:100%; *margin-left:0px;*position:relative; *top:0; *right:0; *bottom:0; *left:0;}

#Logo{width:200px; height:40px;}
#Nav{width:600px;}
#Nav ul{ padding-top:8px;}
#Nav ul li{float:left; display:inline; margin-right:10px;}
#Nav ul li a{ display:block; line-height:24px; height:24px;width:80px; padding:0 8px; text-align:center; font-size:14px;color:#000; border-radius:5px; background:#f0f0f0;outline:none;hide-focus:expression(this.hideFocus=true);}
#Nav ul li a:hover{ background:#23a4da;color:#f0f0f0; }
#Nav ul li a.hover{ background:#23a4da;color:#f0f0f0; }
</style>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
	$("#NavList li a").click(function(){
		$("#NavList li a").removeClass('hover');
		$(this).addClass('hover');	
	})	
})
</script>
</head>
<body>

    <div class="topBox">
    	<div class="fn-cf_o">
    	<div id="Logo" class="fn-f-l">
        	<img src="images/logo.jpg" />
        </div>
        <div id="Nav" class="fn-f-r">
        	<ul class="fn-cf_o" id="NavList">
            	<li><a href="demo_default.html" class="hover" target="main">Demo-默认</a></li>
                <li><a href="demo_extend.html" target="main">Demo-扩展</a></li>
                <li><a href="demo_artifice.html" target="main">Demo-技巧</a></li>
                <li><a href="api.html" target="main">API文档</a></li>
                <li><a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=awYZRQACBSsNBBMGCgIHRQgEBg" target="main">Bug反馈</a></li>
            </ul>
        </div>
        </div>
    </div>
    <div class="mainBox">
        <iframe frameborder="0" src="demo_default.html" name="main"></iframe>
    </div>
</body>
</html>

JS代码(jquery.kinMaxShow-1.1.min.js):

/*! jQuery.kinMaxShow v1.1 2013-08-27 | mr.kin@foxmail.com */
eval((function(a,b){
	return a.replace(/\w+/g,function(ss){
	return b[parseInt(ss,36)];
}
);
}
)("(0($){
	\r$.1.2 = 0(3){
	\r4 5 ={
	\r6:7,\r8:9,\ra:b,\rc:d,\re:\'f\',\rg:\'h h\',\ri:{
	\rj:\'k\',\rl:m,\rn:{
	o:\'p\',6:\'p\',q:\'p\',r:\'s\',t:\'s\',u:\'s\',v:\"#w\",x:\"y z #10\",11:\"#12\",13:\'h\',14:\'15\',16:\"17\",18:\'19\'}
,\r1a:{
	v:\"#1b\",x:\"y z #1c\",11:\"#1d\"}
\r}
,\r1e:0(1f,1g){
}
\r}
;
	\r1h = 1i.1j(d,{
}
,5,3);
	\r4 1k ={
}
;
	\r1k.1l = $(1m).1l;
	\r1n($(1m).1o>1p){
	\r$.1q(\'2 1q[1r 1s 1t 1u 1v]\');
	\r1w m;
	\r}
\r1k.1x = 1m;
	\r1k.1f = 1y;
	\r1k.1z = 1y;
	\r1k.20 = $(1k.1x).21(\'22\').20();
	\r1k.23 = \'24\' + 1k.1l.25(\/\\26\/27,\'\') + \'28\';
	\r1k.29 ={
}
;
	\r1k.1 ={
}
;
	\r1k.2a = 0(){
	\r$(1k.1x).2b({
	o:\'2c%\',6:1h.6,2d:\'2e\',2f:\'2g\'}
).21(\'22\').2h(1k.23+\'2i\').2j();
	\r1k.2k();
	\r}
;
	\r1k.2k = 0(){
	\r1k.2l();
	\r1k.2m();
	\r}
;
	\r1k.2l = 0(){
	\r$(1k.1x).21(\'22\').2n(\'<22 2o=\"\'+1k.23+\'2p\"><\/22>\');
	\r$(\'.\'+1k.23+\'2i\',1k.1x).2q(0(){
	\r4 2r = $(1m).21(\'2r\');
	\r1n(2r.1o){
	\r4 2s = 2r.21(\'2t\').2u(\'2v\');
	\r2r.21(\'2t\').2w();
	\r2r.2h(1k.23+\'2x\');
	\r}
2y{
	\r4 2s = $(1m).21(\'2t\').2u(\'2v\');
	\r$(1m).21(\'2t\').2w();
	\r}
\r$(1m).2b({
	v:\'2z(\'+2s+\') 30-31 \'+1h.g,\'32-1f\':1p}
);
	\r}
);
	\r$(\'.\'+1k.23+\'2i\',1k.1x).33(1y).2b(\'32-1f\',\'34\');
	\r1n(1h.i.n.35!=\'36\'){
	\r4 37 = \'\';
	\r38(39=1p;
	39<=1k.20;
	39++){
	\r1n(1h.i.l){
	\r37+=\'<3a>\'+39+\'<\/3a>\';
	\r}
2y{
	\r37+=\'<3a> <\/3a>\';
	\r}
\r}
\r$(1k.1x).3b(\'<3c 2o=\"\'+1k.23+\'i\">\'+37+\'<\/3c>\');
	\r$(\'.\'+1k.23+\'i 3a\',1k.1x).33(1y).2h(1k.23+\'1a\');
	\r}
\r1k.3d();
	\r$(\'.\'+1k.23+\'2i:3e(1y)\',1k.1x).2b(\'32-1f\',1p).2b({
	3f:1y}
);
	\r$(\'.\'+1k.23+\'2i\',1k.1x).3g();
	\r$(1k.1x).2b({
	2d:\'3h\',3i:\'3h\',35:\'3j\'}
);
	\r}
;
	\r1k.3d = 0(){
	\r4 3k = \'<3l 3m=\"3n\/2b\">\';
	\r3k+= 1k.1l+\' *{
	3o:1y;
	3p:1y;
}
\';
	\r3k+= 1k.1l+\' .\'+1k.23+\'2p{
	o:2c%;
	6:\'+3q(1h.6)+\'3r;
	2f:2g;
	32-1f:1p;
}
\';
	\r3k+= 1k.1l+\' .\'+1k.23+\'2p .\'+1k.23+\'2i{
	o:2c%;
	6:\'+3q(1h.6)+\'3r;
	2f:3s;
	2d:2e;
}
\';
	\r3k+= 1k.1l+\' .\'+1k.23+\'2p .\'+1k.23+\'2i 2r.\'+1k.23+\'2x{
	o:2c%;
	6:\'+3q(1h.6)+\'3r;
	35:3j;
	3n-3t:36;
	3p:1y;
	3o:1y;
	v:3u;
	3n-3v:1y;
	3w:36;
	2j-1a:3x(1m.3y=d);
}
\';
	\r1n(1h.i.n.35!=\'36\'){
	\r3k+= 1k.1l+\' .\'+1k.23+\'i{
	\'+1k.1.3z(1h.i.n,[\'40\',\'r\',\'t\',\'19\'],d)+\';
	2f:3s;
	41-3l:36;
	32-1f:34;
	2d:2e;
	42:1p;
}
\';
	\r3k+= 1k.1l+\' .\'+1k.23+\'i 3a{
	\'+1k.1.3z(1h.i.n,[\'40\',\'r\',\'t\',\'19\'])+\';
	43:44;
	-45-3n-20-46:36;
}
\';
	\r3k+= 1k.1l+\' .\'+1k.23+\'i 3a.\'+1k.23+\'1a{
	\'+1k.1.3z(1h.i.1a,[\'40\',\'r\',\'t\',\'19\'])+\';
	43:47;
}
\';
	\r}
\r3k+= \'<\/3l>\';
	\r$(1k.1x).48(3k);
	\r}
\r1k.2m = 0(){
	\r1h.1e.49($(\'.\'+1k.23+\'2i:33(\'+1k.1f+\')\',1k.1x),1k.1f,\'4a\');
	\r4 4b;
	\r$(\'.\'+1k.23+\'i\',1k.1x).4c(\'3a\',1h.i.j,0(){
	\r4d = 1m;
	\r0 4e(){
	\r1k.1f = $(4d).1f();
	\r1k.4f();
	\r}
\r1n(1h.i.j==\'4g\'){
	\r4b = 4h(4e,4i);
	\r}
2y{
	\r4e();
	\r}
\r}
)\r1n(1h.i.j==\'4g\'){
	\r$(\'.\'+1k.23+\'i\',1k.1x).4c(\'3a\',\'4j\',0(){
	\r4k(4b);
	\r}
)\r}
\r1k.1f = 1p;
	\r1k.1z = 1y;
	\r1k.29.4l = 4m(1k.4f,1h.8*b+1h.a);
	\r1n(1h.c){
	\r$(1k.1x).4n(0(){
	\r4o(1k.29.4l);
	\r}
,0(){
	\r1k.29.4l = 4m(1k.4f,1h.8*b+1h.a);
	\r}
)\r}
\r}
;
	\r1k.4f = 0(){
	\r1h.1e.49($(\'.\'+1k.23+\'2i:33(\'+(1k.1z)+\')\',1k.1x),1k.1z,\'4p\');
	\r1n(1h.i.n.35!=\'36\'){
	\r$(\'3c.\'+1k.23+\'i 3a\',1k.1x).4q(1k.23+\'1a\');
	\r$(\'3c.\'+1k.23+\'i 3a\',1k.1x).33(1k.1f).2h(1k.23+\'1a\');
	\r}
\r$(\'.\'+1k.23+\'2i:4r\',1k.1x).4s(d,m);
	\r$(\'.\'+1k.23+\'2i\',1k.1x).2b(\'32-1f\',1p);
	\r$(\'.\'+1k.23+\'2i\',1k.1x).33(1k.1f).2b({
	3f:1y,\'32-1f\':34}
);
	\r$(\'.\'+1k.23+\'2i\',1k.1x).33(1k.1f).4t({
	3f:1p}
,1h.a,1h.e,0(){
	\r$(\'.\'+1k.23+\'2p .\'+1k.23+\'2i:4u(:33(\'+1k.1f+\'))\',1k.1x).2b({
	3f:1y}
);
	\r1h.1e.49($(\'.\'+1k.23+\'2i:33(\'+1k.1f+\')\',1k.1x),1k.1f,\'4a\');
	\r1k.1z = 1k.1f;
	\r1n(1k.1f==1k.20-1p){
	\r1k.1f=1y;
	\r}
2y{
	\r1k.1f++;
	\r}
\r}
\r);
	\r}
;
	\r1k.4v = 0(){
	\r1k.2a();
	\r}
;
	\r1k.1.3z = 0(4w,4x,4y){
	\r4y = 4y?d:m;
	\r4 4z = 50.51.52(\"53\")!=-1p;
	\r4 3l = \'\';
	\r1n(4y){
	\r38 (4 54 55 4w){
	\r1n($.56(54,4x)!=-1p){
	\r57 = 54.25(\/([58-59])\/,5a);
	\r1n(57==\'3f\' && 4z){
	\r3l +=\"5b:5c(3f=\"+(4w[54]*2c)+\");
	\";
	\r}
2y{
	\r3l +=57+\":\"+4w[54]+\";
	\";
	\r}
\r}
\r}
;
	\r}
2y{
	\r38 (4 54 55 4w){
	\r1n($.5d(4x)){
	\r1n($.56(54,4x)==-1p){
	\r57 = 54.25(\/([58-59])\/,5a);
	\r1n(57==\'3f\' && 4z){
	\r3l +=\"5b:5c(3f=\"+(4w[54]*2c)+\");
	\";
	\r}
2y{
	\r3l +=57+\":\"+4w[54]+\";
	\";
	\r}
\r}
\r}
2y{
	\r57 = 54.25(\/([58-59])\/,5a);
	\r1n(57==\'3f\' && 4z){
	\r3l +=\"5b:5c(3f=\"+(4w[54]*2c)+\");
	\";
	\r}
2y{
	\r3l +=57+\":\"+4w[54]+\";
	\";
	\r}
\r}
\r}
;
	\r}
\r0 5a(5e){
	\r4 5f=\'\';
	\r5f = \'-\'+5e.5g();
	\r1w 5f;
	\r}
;
	\r1w 3l;
	\r}
;
	\r1k.4v();
	\r}
\r}
)(1i)","function|fn|kinMaxShow|user_options|var|default_options|height|500|intervalTime|6|switchTime|1000|hoverPause|true|easing|linear|imageAlign|center|button|switchEvent|click|showIndex|false|normal|width|14px|lineHeight|right|10px|bottom|fontSize|background|cccaca|border|1px|solid|ffffff|color|666666|textAlign|marginRight|8px|fontFamily|Verdana|float|left|focus|CC0000|FF0000|000000|callback|index|action|options|jQuery|extend|k|selector|this|if|length|1|error|More|than|one|selected|object|return|self|0|lindex|size|children|div|prename|KMSPrefix_|replace|W|ig|_|data|onload|css|100|overflow|hidden|position|relative|addClass|image_item|hide|init|setLayout|setAnimate|wrapAll|class|image_box|each|a|image|img|attr|src|remove|coverlink|else|url|no|repeat|z|eq|2|display|none|button_list|for|i|li|append|ul|setCSS|gt|opacity|show|visible|visibility|block|cssCode|style|type|text|margin|padding|parseInt|px|absolute|decoration|transparent|indent|outline|expression|hideFocus|objToCss|top|list|_zoom|cursor|pointer|webkit|adjust|default|prepend|call|fadeIn|overDelayTimer|delegate|_this|setChange|setOpacity|mouseover|setTimeout|200|mouseout|clearTimeout|moveTimer|setInterval|hover|clearInterval|fadeOut|removeClass|animated|stop|animate|not|run|obj|excArr|excFlag|isIE|navigator|userAgent|indexOf|MSIE|key|in|inArray|pKey|A|Z|KtoLowerCase|filter|alpha|isArray|word|str|toLowerCase".split("|")));

CSS代码(base.css):

/* ��ʾ����CSS�ļ� �� kinMaxShow �޹� ��kinMaxShow ���������κ�css�ļ��Լ�ͼƬ */
/* css reset */
html,body,div,p,ul,ol,li{padding:0;margin:0;}
a{text-decoration:none;}
img{border:0;}
ul,ol,li{list-style:none;}
body{font:12px 'Microsoft Yahei';}
/*css function list*/
.fn-dp-n{display:none;}
.fn-dp-b{display:block;}
.fn-cf_o{overflow:hidden;_zoom:1;}
.fn-cf_a:after{display:block;clear:both;content:"";visibility:hidden;height:0;}
.fn-cf_a{_zoom:1;}
.fn-cf_c{clear:both;line-height:0;font-size:0;}
.fn-fs-14{font-size:14px;}
.fn-ta-l{text-align:left;}
.fn-ta-c{text-align:center;}
.fn-ta-r{text-align:right;}
.fn-of-h{overflow:hidden;}
.fn-td-n{text-decoration:none;}
.fn-td-u{text-decoration:underline;}
.fn-fw-n{font-weight:normal;}
.fn-fw-b{font-weight:bold;}
.fn-f-l{float:left}
.fn-f-r{float:right}
.fn-b-0{border:0;}
.fn-pt-r{position:relative;}
.fn-pt-a{position:absolute;}
.fn-ff-v{font-family:Verdana;}
/* page css */
#info_box{margin-top:80px;}
h1.title{font-size:18px;font-family:"Microsoft Yahei",Verdana;margin:0 0 10px 20px;padding:1px 2px;line-height:26px;background:#333;color:#fff;display:inline-block;_ display:inline;}
p.text{font-size:14px;font-family:"Microsoft Yahei",Verdana;line-height:22px;color:#333;padding:0 20px;}
p.text a{color:#0088CC;margin:0 1px;}
p.text a:hover{text-decoration:underline;}
.mycode{background:#EEEEEE;border:1px dashed #CCCCCC;font-size:10pt;margin:10px 20px;padding:10px;font-family:"Courier New",Verdana;}
.mycode pre{color:#0000FF;margin:0;white-space:pre-wrap;word-wrap:break-word;}
.mycode pre span.note{color:#999;font-size:12px;line-height:20px;}
.mycode pre span.highlight{color:#F00;font-weight:bold;}
.mycode pre h4{font-size:12px;background:#c00;color:#fff;display:inline-block;height:20px;line-height:20px;padding:0 5px;}
#user_tips{padding:10px 20px 20px;margin:0 20px 30px;background:#FEFCDF;border:1px solid #FEEA93;}
#user_tips h3{background:#F93;display:inline-block;padding:2px 5px;color:#fff}
#user_tips p{color:#666;}

附件:下载该文件资源,减少时间成本(增值服务)