Jquery ui 图片幻灯效果
需求说明：
- 连续循环
- 播放速度可配置
- 可自动播放，也可手动操作
- 图片加载错误时，出现默认设定的图片
- 图片变形动画速度可配置
- 解决IE6Select 框在层上显示的BUG
- 支持键盘操作
- 图片高度和宽度的最大值可配置
采用的是JSON数据格式：
var testData =[{
imageSrc:"images/1.jpg",
title:"第一张图",
remark:"第一张图的描述"
},{
imageSrc:"images/2.jpg",
title:"第二张图",
remark:"第二张图的描述"
},{
imageSrc:"images/3.jpg",
title:"第三张图",
remark:"第三张图的描述"
},{
imageSrc:"images/4.jpg",
title:"第四张图",
remark:"第四张图的描述"
},{
imageSrc:"images/5.jpg",
title:"第5张图",
remark:"第5张图,错无测试"
}];
使用方式：
$.fn.slideShow({
data: testData
});
参数可以任意配置，默认的参数为：
/**
* 默认参数
* @overlayOpcity 背景遮罩层的不透明读，1为不透明，0为全透明，默认为0.8
* @topPix 幻灯与窗口顶部的距离，默认为50，单位为像素
* @startIndex 从第几张图片开始播放幻灯片，默认为0，即第一张图片开始
* @maxWidth 图片展示的最大宽度，若宽于这个宽度，这会等比例缩小，默认值为800 单位为像素
* @maxHeight 图片展示的最大宽度，若宽于这个宽度，这会等比例缩小，默认值为500 单位为像素
* @pictureShowSpeed 图片变形展示的时间长度，默认为500，单位为毫秒
* @autoPlaySpeed 自动播放图片是，图片轮换速度，默认为3000，单位为毫秒
* @autoPlay 是否默认自动播放，默认为false
* @nextKeyCode 控制下一张图片的keyCode,默认为78，即n键
* @prevKeyCode 控制下一张图片的keyCode,默认为80，即p键
* @closeKeyCode 关闭图片幻灯的快捷键，默认为27，即esc键
* @defaultImage 在图片出错时的默认图片，默认为"images/error.gif"
*/
$.fn.slideShow.defaults = {
overlayOpcity: 0.8,
topPix: 50,
startIndex: 0,
maxWidth: 800,
maxHeight: 600,
pictureShowSpeed: 500,
autoPlaySpeed: 3000,
autoPlay: false,
nextKeyCode: 78,
prevKeyCode: 80,
closeKeyCode: 27,
defaultImage: "images/error.gif",
dataType: "json",
data: null,
overlayTemp:"<div class=\"giant-ui-slideShowOverlay\"><iframe frameborder=\"0\" src=\"overlay.html\" \/></div>",
domTemp: "<div class=\"giant-ui-slideShow\">" + "<div class=\"imageContainer\"><span class=\"close\"></span>" + "<img class=\"slideShowImage\">" + "<div class=\"hoverNav\">" + "<span title=\"上一张\" class=\"prevLink\">上一张上一张上一张上一张</span>" + "<span title=\"下一张\" class=\"nextLink\">上一张上一张上一张上一张</span>" + "</div>" + "<div class=\"loading\">" + "<img src=\"images/loading.gif\">" + "</div>" + "</div>" + "<div class=\"imageDataContainer\">" + "<h3></h3>" + "<span class=\"numberDisplay\"></span>" + "<div class=\"remark\"></div>" + "</div>" + "<div class=\"buttonContainer\">" + "<span title=\"第一张\" class=\"first\"></span><span title=\"上一张\" class=\"prev\"></span><span class=\"play\"></span><span title=\"下一张\" class=\"next\"></span><span title=\"最有一张\" class=\"last\"></span>" + "</div></div>"
};
