kinMaxShow 当前版本信息

当前版本：kinMaxShow 1.1

更新时间：2013-08-27

kinMaxShow API 可选参数以及详解

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 友情小提示

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 测试通过。

友情提示：

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