jquery一个比较好的轮播图jQuery.kinMaxShow介绍

kinMaxShow API 可选参数以及详解

kinMaxShow 主参数详解

参数名称	默认值	简单释义
height	500	【整型 (单位:像素)】焦点图高度，必须设置缺省则启用默认高度 500
intervalTime	6	【整型 (单位:秒)】焦点图切换间隔时间
switchTime	1000	【整型 (单位:毫秒)】焦点图切换所需时间，若设置为0 则无切换效果直接切换到下一张
easing	"linear"	【字符型】擦除效果(切换) jQuery自带有 "linear" 和 "swing" ,如需要其他擦除效果请使用 jquery.easing.js 插件
imageAlign	"center center"	【字符型】焦点图图片对齐方式，kinMaxShow原理是把默认结构里的img 设置为容器背景图片，所以这里是背景图片对齐方式。可选值:水平方向left、center、right，垂直方向top、center、bottom 中间以“空格”分隔
button	{ switchEvent:\'click\', showIndex:false, normal:{width:\'14px\',height:\'14px\',lineHeight:\'14px\' ,right:\'10px\',bottom:\'10px\',fontSize:\'10px\',background:"#cccaca",border:"1px solid #ffffff",color:"#666666",textAlign:\'center\',marginRight:\'8px\',fontFamily:"Verdana",float:\'left\'}, focus:{background:"#CC0000",border:"1px solid #FF0000",color:"#000000"} }	【对象】焦点图按钮样式设置详情见下面【附表①】
callback	function(index,action){ }	【函数】焦点图切换回调，每张图片淡入、淡出都会调用并且传入2个参数(index,action) index (整型) 当前图片索引 0为第一张图片 action (字符型) 切入或是切出值:fadeIn或fadeOut 函数内 this指向当前图片容器对象可用来操作里面元素

【附表①】 kinMaxShow button 参数详解

参数名称	默认值	简单释义
switchEvent	"click"	【字符型】按钮鼠标切换事件可选事件：click 鼠标点击按钮切换、mouseover 鼠标滑过按钮切换
showIndex	false	【布尔型】按钮上是否显示索引数字，从1开始，默认false 不显示
normal	{width:\'14px\',height:\'14px\',lineHeight:\'14px\',right:\'10px\',bottom:\'10px\',fontSize:\'10px\', background:"#cccaca",border:"1px solid #ffffff",color:"#666666",textAlign:\'center\',marginRight:\'8px\',fontFamily:"Verdana",float:\'left\'}	【对象】按钮常规下样式设置，css写法，类似jQuery的 $(\'xxx\').css({key:value,……})中css写法。对于带有"-"的CSS属性支持驼峰式写法或是键加上引号如：{mrginRight:\'8px\'}或是{\'mrgin-right\':\'8px\'} 如果设置了 display:none 则焦点图会隐藏按钮容器不显示按钮，按钮结构也不会被创建，如不需要焦点图上面显示按钮可这样设置。友情提示：可以设置透明度哦不用区分浏览器，统一为 opacity，透明度取值皆为0~1之间如：opacity:0.5 CSS3属性也支持哦可以设置按钮圆角、投影、渐变等如：设置圆角 borderRadius:10px ，只不过IE8及以下不支持
foucs	{background:"#CC0000",border:"1px solid #FF0000",color:"#000000"}	【对象】当前索引按钮样式设置设置方法同上

kinMaxShow 友情小提示

kinMaxShow HTML结构中如果你的焦点图不需要链接仅供欣赏则a链接可以省略。【demo-扩展】中模仿支付宝那个就没链接。结构如下：

HTML 代码

<div id="kinMaxShow">
     <!--HTML结构中 div容器不能省略哦-->
    <div>  <img src="images/demo_default_images/1.jpg"   />   </div>
    <div>  <img src="images/demo_default_images/2.jpg"   />   </div>
    <div>  <img src="images/demo_default_images/3.jpg"   />   </div>
    <div>  <img src="images/demo_default_images/4.jpg"   />   </div>
    <div>  <img src="images/demo_default_images/5.jpg"   />   </div>
    <div>  <img src="images/demo_default_images/6.jpg"   />   </div>                    
        
</div>

kinMaxShow 默认包含 a 链接 HTML结构如下：

HTML 代码

<div id="kinMaxShow">

    <div>
        <a href="http://www.qq.com" target="_blank"><img src="images/demo_default_images/1.jpg"   /></a>
    </div>
    
    <div>
        <a href="http://www.qq.com" target="_blank"><img src="images/demo_default_images/2.jpg"  /></a>
    </div>
    
    <div>
        <a href="http://www.qq.com" target="_blank"><img src="images/demo_default_images/3.jpg"   /></a>
    </div>
    
    <div>
        <a href="http://www.qq.com" target="_blank"><img src="images/demo_default_images/4.jpg"   /></a>
    </div>

    <div>
        <a href="http://www.qq.com" target="_blank"><img src="images/demo_default_images/5.jpg"   /></a>
    </div>

    <div>
        <a href="http://www.qq.com" target="_blank"><img src="images/demo_default_images/6.jpg"   /></a>
    </div>		
        
</div>

kinMaxShow 支持情况

kinMaxShow 支持 jQuery 1.4.2及以上版本但不包(jQuery 1.8.0和jQuery 1.8.1) 在这两个jQuery版本中当快速点击kinMaxShow 按钮时会有点小问题，研究了很久暂未解决，所以不建议在使用kinMaxShow时候选择这两个jQuery版本。

关于浏览器支持部分浏览器未测估计也支持，IE6、IE8、chrome、Firefox 测试通过。如遇到有部分浏览器有bug或是其他问题的bug 欢迎反馈!

反馈时邮件标题请包含"kinMaxShow" 以便于邮箱自动归类我比较容易看到。谢谢！狠戳这里可以反馈Bug

参考：http://www.lanrentuku.com/down/js/jiaodiantu-989/api.html

demo

jquery.kinMaxShow-1.0.min.js内容如下：

1 /*! jQuery.kinMaxShow v1.0 | mr.kin@foxmail.com */
2 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 f\\',\rg:{\rh:\\'i\\',\rj:k,\rl:{m:\\'n\\',6:\\'n\\',o:\\'n\\',p:\\'q\\',r:\\'q\\',s:\\'q\\',t:\"#u\",v:\"w x #y\",z:\"#10\",11:\\'f\\',12:\\'13\\',14:\"15\",16:\\'17\\'},\r18:{t:\"#19\",v:\"w x #1a\",z:\"#1b\"}\r},\r1c:0(1d,1e){}\r};\r1f = 1g.1h(1i,{},5,3);\r4 1j = {};\r1j.1k = $(1l).1k;\r1m($(1l).1n>1o){\r$.1p(\\'2 1p[1q 1r 1s 1t 1u]\\');\r1v k;\r}\r1j.1w = 1l;\r1j.1d = 1x;\r1j.1y = 1x;\r1j.1z = $(1j.1w).20(\\'21\\').1z();\r1j.22 = \\'23\\';\r1j.24 = {};\r1j.1 = {};\r1j.25 = 0(){\r$(1j.1w).26({m:\\'27%\\',6:1f.6,28:\\'29\\',2a:\\'2b\\'}).20(\\'21\\').2c(1j.22+\\'2d\\').2e();\r1j.2f();\r};\r1j.2f = 0(){\r1j.2g();\r1j.2h();\r1j.2i();\r};\r1j.2g = 0(){\r1j.24.2j = 2k 2l();\r$(1j.1w).20(\\'21\\').2m(0(){\r1j.24.2j.2n($(1l).2o(\\'2p\\').2q(\\'2r\\'));\r})\r};\r1j.2h = 0(){\r$(1j.1w).20(\\'21\\').2s(\\'<21 2t=\"\\'+1j.22+\\'2u\"><\/21>\\');\r$(\\'.\\'+1j.22+\\'2d\\',1j.1w).2m(0() {\r4 2v = $(1l).20(\\'2v\\');\r1m(2v.1n){\r4 2w = 2v.20(\\'2p\\').2q(\\'2x\\');\r2v.20(\\'2p\\').2y();\r}2z{\r4 2w = $(1l).20(\\'2p\\').2q(\\'2x\\');\r$(1l).20(\\'2p\\').2y();\r}\r$(1l).26({t:\\'30(\\'+2w+\\') 31-32 \\'+1f.e,\\'33-1d\\':1x});\r});\r$(\\'.\\'+1j.22+\\'2d\\',1j.1w).34(1x).26(\\'33-1d\\',\\'1o\\');\r1m(1f.g.l.35!=\\'36\\'){\r4 37 = \\'\\';\r38(39=1o;39<=1j.1z;39++){\r1m(1f.g.j){\r37+=\\'<3a>\\'+39+\\'<\/3a>\\';\r}2z{\r37+=\\'<3a> <\/3a>\\';\r}\r}\r$(1j.1w).3b(\\'<3c 2t=\"\\'+1j.22+\\'g\">\\'+37+\\'<\/3c>\\');\r$(\\'.\\'+1j.22+\\'g 3a\\',1j.1w).34(1x).2c(\\'18\\');\r}\r1j.3d();\r$(\\'.\\'+1j.22+\\'2d:3e(1x)\\',1j.1w).26(\\'33-1d\\',1x).26({3f:1x});\r$(\\'.\\'+1j.22+\\'2d\\',1j.1w).3g();\r$(1j.1w).26({28:\\'3h\\',3i:\\'3h\\',35:\\'3j\\'});\r};\r1j.3d = 0(){\r4 3k = \\'<3l 3m=\"3n\/26\">\\';\r3k+= 1j.1k+\\' *{ 3o:1x;3p:1x;} \\';\r3k+= 1j.1k+\\' .\\'+1j.22+\\'2u{m:27%;6:\\'+3q(1f.6)+\\'3r;2a:2b;33-1d:1o;} \\';\r3k+= 1j.1k+\\' .\\'+1j.22+\\'2u .\\'+1j.22+\\'2d{m:27%;6:\\'+3q(1f.6)+\\'3r;2a:3s;28:29;} \\';\r3k+= 1j.1k+\\' .\\'+1j.22+\\'2u .\\'+1j.22+\\'2d 2v{m:27%;6:\\'+3q(1f.6)+\\'3r;35:3j;3n-3t:36;3p:1x;3o:1x;t:3u;3n-3v:1x;3w:36;2e-18:3x(1l.3y=1i);} \\';\r1m(1f.g.l.35!=\\'36\\'){\r3k+= 1j.1k+\\' .\\'+1j.22+\\'g{\\'+1j.1.3z(1f.g.l,[\\'40\\',\\'p\\',\\'r\\',\\'17\\'],1i)+\\';2a:3s;41-3l:36;33-1d:42;}\\';\r3k+= 1j.1k+\\' .\\'+1j.22+\\'g 3a{\\'+1j.1.3z(1f.g.l,[\\'40\\',\\'p\\',\\'r\\',\\'17\\'])+\\';43:44;-45-3n-1z-46:36;}\\';\r3k+= 1j.1k+\\' .\\'+1j.22+\\'g 3a.18{\\'+1j.1.3z(1f.g.18,[\\'40\\',\\'p\\',\\'r\\',\\'17\\'])+\\';43:47;}\\';\r}\r3k+= \\'<\/3l>\\';\r$(1j.1w).48(3k);\r}\r1j.2i = 0(){\r1f.1c.49($(\\'.\\'+1j.22+\\'2d:34(\\'+1j.1d+\\')\\',1j.1w),1j.1d,\\'4a\\');\r4 4b;\r$(\\'.\\'+1j.22+\\'g\\',1j.1w).4c(\\'3a\\',1f.g.h,0(){\r4d = 1l;\r0 4e(){\r1j.1d = $(4d).1d();\r1j.4f();\r}\r1m(1f.g.h==\\'4g\\'){\r4b = 4h(4e,4i);\r}2z{\r4e();\r}\r})\r1m(1f.g.h==\\'4g\\'){\r$(\\'.\\'+1j.22+\\'g\\',1j.1w).4c(\\'3a\\',\\'4j\\',0(){\r4k(4b);\r})\r}\r1j.1d = 1o;\r1j.1y = 1x;\r1j.24.4l = 4m(1j.4f,1f.8*b+1f.a);\r};\r1j.4f = 0(){\r1f.1c.49($(\\'.\\'+1j.22+\\'2d:34(\\'+(1j.1y)+\\')\\',1j.1w),1j.1y,\\'4n\\');\r4o(1j.24.4l);\r1m(1f.g.l.35!=\\'36\\'){\r$(\\'3c.\\'+1j.22+\\'g 3a\\',1j.1w).4p(\\'18\\');\r$(\\'3c.\\'+1j.22+\\'g 3a\\',1j.1w).34(1j.1d).2c(\\'18\\');\r}\r$(\\'.\\'+1j.22+\\'2d:4q\\',1j.1w).4r(1i,k);\r$(\\'.\\'+1j.22+\\'2d\\',1j.1w).26(\\'33-1d\\',1x);\r$(\\'.\\'+1j.22+\\'2d\\',1j.1w).34(1j.1d).26({3f:1x,\\'33-1d\\':1o});\r$(\\'.\\'+1j.22+\\'2d\\',1j.1w).34(1j.1d).4s({3f:1o},{4t:1f.a,c:1f.c,4u:0(){\r$(\\'.\\'+1j.22+\\'2u .\\'+1j.22+\\'2d:4v(:34(\\'+1j.1d+\\'))\\',1j.1w).26({3f:1x});\r1f.1c.49($(\\'.\\'+1j.22+\\'2d:34(\\'+1j.1d+\\')\\',1j.1w),1j.1d,\\'4a\\');\r1j.24.4l = 4m(1j.4f,1f.8*b+1f.a);\r1j.1y = 1j.1d;\r1m(1j.1d==1j.1z-1o){\r1j.1d=1x;\r}2z{\r1j.1d++;\r}\r}\r});\r};\r1j.4w = 0(){\r1j.25();\r};\r1j.1.3z = 0(4x,4y,4z){\r4z = 4z?1i:k;\r4 50 = 51.52.53(\"54\")!=-1o;\r4 3l = \\'\\';\r1m(4z){\r38 (4 55 56 4x){\r1m($.57(55,4y)!=-1o){\r58 = 55.59(\/([5a-5b])\/,5c);\r1m(58==\\'3f\\' && 50){\r3l +=\"5d:5e(3f=\"+(4x[55]*27)+\");\";\r}2z{\r3l +=58+\":\"+4x[55]+\";\";\r}\r}\r};\r}2z{\r38 (4 55 56 4x){\r1m($.5f(4y)){\r1m($.57(55,4y)==-1o){\r58 = 55.59(\/([5a-5b])\/,5c);\r1m(58==\\'3f\\' && 50){\r3l +=\"5d:5e(3f=\"+(4x[55]*27)+\");\";\r}2z{\r3l +=58+\":\"+4x[55]+\";\";\r}\r}\r}2z{\r58 = 55.59(\/([5a-5b])\/,5c);\r1m(58==\\'3f\\' && 50){\r3l +=\"5d:5e(3f=\"+(4x[55]*27)+\");\";\r}2z{\r3l +=58+\":\"+4x[55]+\";\";\r}\r}\r};\r}\r0 5c(5g){\r4 5h=\\'\\';\r5h = \\'-\\'+5g.5i();\r1v 5h;\r};\r1v 3l;\r};\r1j.4w();\r}\r})(1g)", "function|fn|kinMaxShow|user_options|var|default_options|height|500|intervalTime|6|switchTime|500|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|true|k|selector|this|if|length|1|error|More|than|one|selected|object|return|self|0|lindex|size|children|div|prename|kinMaxShow_|data|onload|css|100|overflow|hidden|position|relative|addClass|image_item|hide|init|setData|setLayout|setAnimate|title|new|Array|each|push|find|img|attr|alt|wrapAll|class|image_box|a|image|src|remove|else|url|no|repeat|z|eq|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|2|cursor|pointer|webkit|adjust|default|prepend|call|fadeIn|overDelayTimer|delegate|_this|setChange|setOpacity|mouseover|setTimeout|200|mouseout|clearTimeout|moveTimer|setInterval|fadeOut|clearInterval|removeClass|animated|stop|animate|duration|complete|not|run|obj|excArr|excFlag|isIE|navigator|userAgent|indexOf|MSIE|key|in|inArray|pKey|replace|A|Z|KtoLowerCase|filter|alpha|isArray|word|str|toLowerCase".split("|")));

在html页面中使用：

<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/jquery.kinMaxShow-1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    
    $("#kinMaxShow").kinMaxShow({
        height:420,
        button:{
                switchEvent:\'mouseover\',
                showIndex:false,
                normal:{background:\'url(images/pagination2.png) no-repeat 0px 0\',marginRight:\'3px\',border:\'0\',right:\'48%\',bottom:\'10px\'},
                focus:{background:\'url(images/pagination2.png) no-repeat 0 -15px\',border:\'0\'}
            }            
    });


});

<div id="show">
        <div id="kinMaxShow"> 
            <div><a href="#" target="_blank"><img src="images/bn1.jpg"  /></a></div>           
            <div><a href="#" target="_blank"><img src="images/bn2.jpg"  /></a></div>        
            <div><a href="#" target="_blank"><img src="images/bn3.jpg"   /></a></div>            
            <div><a href="#" target="_blank"><img src="images/bn4.jpg"   /></a></div>               
        </div> 
</div>