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>