kinMaxShow 当前版本信息

当前版本：kinMaxShow 1.1

更新时间：2013-08-27

kinMaxShow API 可选参数以及详解

kinMaxShow 主参数详解

参数名称	默认值	简单释义
height	500	【整型 (单位:像素)】焦点图高度，必须设置缺省则启用默认高度 500
intervalTime	6	【整型 (单位:秒)】焦点图切换间隔时间
switchTime	1000	【整型 (单位:毫秒)】焦点图切换所需时间，若设置为0 则无切换效果直接切换到下一张
hoverPause^1.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 友情小提示

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版本，而且这两个jQuery版本本身就有Bug 详情请搜索下便知。

使用kinMaxShow时建议使用最新的jQuery版本以获得更好的支持，如：jQuery-1.10.x 以上版本。

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

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

友情提示：

kinMaxShow 图片的宽度建议设置成奇数，如本例中图片宽度为2099，当图片宽度为偶数时 IE浏览器下执行透明度切换时会有1像素的位移，虽然没什么影响，但感觉很不爽，这是IE 背景图片对齐方式的一个BUG。其他浏览器无此现象。幻灯图片1px无所谓了而且全屏幻灯片的内容一般都是设计在中心两边是渐变，建议使用kinMaxShow设置全屏焦点图时图片宽度为：2099px，这样足以满足国内分辨率了。详情查看：百度统计-终端分辨率统计数据