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.0jQuery 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,这样足以满足国内分辨率了。详情查看:百度统计-终端分辨率统计数据