网友zhoukun原创jquery焦点图插件beautyFocus

beautyFocus是一个非常容易入手的slider插件，具体配置参数如下：

$(元素).beautyFocus({ 属性1 : 值1，属性2 ：值2 });

如果不想利用远程地址，那么元素内部要包含img标签，具体可右键查看源代码。

参数	参数类型	默认值	参数说明
url	String	""	远程图片地址，返回的数据结构如下： [ { "height": 241, "picPath": "/webutil/uploadfile/1.png", "picUrl": "http://www.baidu.com", "title": "第1张图片!", "width": 900 }, { "height": 241, "picPath": "/webutil/uploadfile/2.png", "picUrl": "http://www.baidu.com", "title": "第2张图片!", "width": 900 } ] 属性说明:(所有的参数只有picPath是必须的，其他都是非必须的) height :图片高度，可以不指定 width : 图片宽度，可以不指定，不指定按实际宽度展示 * picPth : 远程图片地址必须指定，否则不展示图片 picUrl : 图片链接，可以不指定 title : 图片说明，可以不指定点我远程加载图片
data	JsonArray	{}	和url参数一起使用，用于获取图片传递的参数
auto	Boolean	false	是否自动切换焦点图 true：开启自动切换。自动切换效果 false：禁用自动切换。禁用切换效果
time	number	2000	自动切换的时间间隔该配置项生效，请先设置auto : true 设为3秒切换设为1秒切换设为500毫秒切换
overLay	Boolean	false	是否弹出层形式展示焦点图该功能需要引入layerModel插件，插件地址为：http://zk.citier.net/layerModel.html 查看弹出焦点图
isArrow	Boolean	true	是否展示左右切换箭头显示箭头不显示箭头
isNav	Boolean	true	是否展示右下角分页导航链接显示导航链接不显示导航链接
showTimeLine	Boolean	false	是否显示切换进度条显示切换进度条不显示切换进度条
showTip	Boolean	false	是否显示描述信息此属性配合showTimeLine一起使用，鼠标移上去是否展示提升信息，该信息是img的title属性显示描述信息不显示描述信息
keyboard	Boolean	true	是否键盘可操作键盘操作试试
display	String	fade	幻灯片展示效果目前支持3种效果:fade、left、right fade方式 left方式 right方式
navConfig	jsonArray		自定义导航按钮效果自定义导航按钮

参数

参数类型

默认值

参数说明

url

String

远程图片地址，返回的数据结构如下：

[
{
	"height": 241,
	"picPath": "/webutil/uploadfile/1.png", 
	"picUrl": "http://www.baidu.com",
	"title": "第1张图片!",
	"width": 900
},
{
	"height": 241,
	"picPath": "/webutil/uploadfile/2.png",
	"picUrl": "http://www.baidu.com",
	"title": "第2张图片!",
	"width": 900
}
]

属性说明:(所有的参数只有picPath是必须的，其他都是非必须的)

height :图片高度，可以不指定
width : 图片宽度，可以不指定，不指定按实际宽度展示
* picPth : 远程图片地址必须指定，否则不展示图片
picUrl : 图片链接，可以不指定
title : 图片说明，可以不指定

点我远程加载图片

data

JsonArray

{}

和url参数一起使用，用于获取图片传递的参数

auto

Boolean

false

是否自动切换焦点图

true：开启自动切换。自动切换效果