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="data:images/demo_default_images/1.jpg"   />   </div>
    <div>  <img src="data:images/demo_default_images/2.jpg"   />   </div>
    <div>  <img src="data:images/demo_default_images/3.jpg"   />   </div>
    <div>  <img src="data:images/demo_default_images/4.jpg"   />   </div>
    <div>  <img src="data:images/demo_default_images/5.jpg"   />   </div>
    <div>  <img src="data: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="data:images/demo_default_images/1.jpg"   /></a>
    </div>

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

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

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

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

    <div>
        <a href="http://www.qq.com" target="_blank"><img src="data: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内容如下：

 /*! jQuery.kinMaxShow v1.0 | 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 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="data:images/bn1.jpg"  /></a></div>
            <div><a href="#" target="_blank"><img src="data:images/bn2.jpg"  /></a></div>
            <div><a href="#" target="_blank"><img src="data:images/bn3.jpg"   /></a></div>
            <div><a href="#" target="_blank"><img src="data:images/bn4.jpg"   /></a></div>
        </div>
</div>