jQuery.KinSlideshow 幻灯片效果

jQuery.KinSlideshow 幻灯片效果
插件描述:jQuery.KinSlideshow幻灯片插件,功能很多,有三种不同的幻灯效果供选择,基本能满足你对网页幻灯片效果的需求,兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera。

使用方法

载入JavaScript和CSS文件:

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="dist/jquery.KinSlideshow-1.2.1.min.js"></script>

DOM结构:

/**
 外层div建议加上一句样式:style=”visibility:hidden;”
 不加此句在IE下页面刚加载的瞬间时候会看到所有图片原始样子
 这是因为KinSlideshow 要等页面加载完成才能解析页面中要设置成焦点图的HTML
 虽然只有不到0.01秒的瞬间但用户体验不太好,所以建议加上。不加对程序也没影响!
*/
<div id="KinSlidesh" class="KinSlideshow" style="visibility:hidden;">
  <a href="#" target="_blank"><img src="images/img_11.jpg" alt="这是标题一" width="600" height="300" /></a>
  <a href="#" target="_blank"><img src="images/img_12.jpg" alt="这是标题二" width="600" height="300" /></a>
  <a href="#" target="_blank"><img src="images/img_13.jpg" alt="这是标题三" width="600" height="300" /></a>
</div>

JavaScript调用方式:

$(function(){
  $("#KinSlidesh").KinSlideshow({
    intervalTime:3,
    moveStyle: 'up'
  });
})

参数说明

名称 类型 默认值 说明
intervalTime
integer
5
设置间隔时间,单位:秒
moveSpeedTime
integer
400
切换一张图片所需时间,单位:毫秒
moveStyle
string
"left"
切换方向,可选值:left|right|up|down
mouseEvent string
"mouseclick" 鼠标操作按钮事件,可选值:mouseclick|mouseover
isHasTitleBar
boolean
true
是否显示标题背景
titleBar
object

标题背景样式,默认值:{titleBar_height:40,titleBar_bgColor:"#000000",titleBar_alpha:0.5}
isHasTitleFont
boolean
true
是否显示标题文字
titleFont
object

标题文字样式,默认值:{TitleFont_size:12,TitleFont_color:"#FFFFFF",TitleFont_family:"Verdana",TitleFont_weight:"bold"}
isHasBtn
boolean
true
是否显示按钮
btn
object

按钮样式设置,默认值:{btn_bgColor: "#666666", btn_bgHoverColor: "#CC0000", btn_fontColor: "#CCCCCC", btn_fontHoverColor: "#000000", btn_fontFamily: "Verdana", btn_borderColor: "#999999", btn_borderHoverColor: "#FF0000", btn_borderWidth: 1, btn_bgAlpha: 0.7}