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
关于浏览器支持 部分浏览器未测 估计也支持,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>