当前版本：kinMaxShow 1.1
更新时间：2013-08-27
kinMaxShow 主参数详解
| 参数名称 | 默认值 | 简单释义 |
|---|---|---|
| height | 500 | 【整型 (单位:像素)】焦点图高度，必须设置 缺省则启用默认高度 500 |
| intervalTime | 6 | 【整型 (单位:秒)】焦点图切换间隔时间 |
| switchTime | 1000 | 【整型 (单位:毫秒)】焦点图切换所需时间，若设置为0 则无切换效果 直接切换到下一张 |
| hoverPause1.1+ | ture | 【布尔型】是否悬停暂停， 鼠标停留在kinMaxShow内 是否暂停切换 默认true 悬停暂停，设置为false 悬停不暂停 |
| 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及以下不支持 |
| focus | {background:"#CC0000",border:"1px solid #FF0000",color:"#000000"} | 【对象】当前索引按钮样式设置 设置方法同上 |
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 图片的宽度建议设置成奇数，如本例中图片宽度为2099，当图片宽度为偶数时 IE浏览器下执行透明度切换时会有1像素的位移，虽然没什么影响，但感觉很不爽，这是IE 背景图片对齐方式的一个BUG。其他浏览器无此现象。幻灯图片1px无所谓了而且全屏幻灯片的内容一般都是设计在中心两边是渐变，建议使用kinMaxShow设置全屏焦点图时 图片宽度为：2099px，这样足以满足国内分辨率了。详情查看：百度统计-终端分辨率统计数据