jQuery图片播放器 1.3

handsomezsc

2014-12-19

以下内容来自：http://blog.csdn.net/xxd851116/article/details/7707500

采用jQuery实现的一款使用简单、具有多播放效果的网页图片播放器（jquery.fn.imgplayer），适合UI设计或对前端技术感兴趣的人群。

特性

使用简单，仅需您知道HTML知识；
实现代码完全插件化，和表现层完全解耦合，简洁而优美；
无图片数量限制，可播放任意数量的图片；
可方便灵活地配置播放的动画效果，共32×8种，预览；
可随心所欲地改变播放器的样式；
采用UL的布局和img元素title属性作为标题，对搜索引擎支持友好；
支持切片播放和容器播放的事件扩展；
多浏览器支持：IE6+、FF、Chrome；

使用说明：http://xingxiudong.freevar.com/jquery.fn.imgplayer-1.3/readme.html

DEMO：http://xingxiudong.freevar.com/jquery.fn.imgplayer-1.3/demo/index.html

下载：http://code.google.com/p/imgplayer/downloads/list

版本更新

jquery.fn.imgplayer 1.3(更新时间：2010-02-24):
1. 新增了标题栏显示开关，默认显示，可隐藏标题栏的功能；
2. 新增了animate属性，新增了动画效果；
3. 新增了可修改标题栏位置的功能；
4. 优化了参数的命名，player，play等；
5. 优化了容器一些基本的样式，修改了切换按钮的样式；
6. 优化了容器样式的继承等特性，可随心所欲地定义容器样式，例如去容器边框（默认有边框）；
7. 优化了随机动画的功能；
8. 修改了1.2版本中容器样式的Bug；
jquery.fn.imgplayer 1.2(更新时间：2010-02-24):
1. 修改了标题栏右侧冲出容器的bug；
2. 添加了duration参数，可自定义图片动画效果时间；
jquery.fn.imgplayer 1.1(更新时间：2009-09-23):
1. 修改了鼠标停留播放器和序号标签上图片继续播放的问题；

使用说明：

jQuery图片播放器 1.3

采用jQuery实现的一款使用简单、具有多播放效果的网页图片播放器（jquery.fn.imgplayer），适合UI设计或对前端技术感兴趣的人群。

特性

使用简单，仅需您知道HTML知识；
实现代码完全插件化，和表现层完全解耦合，简洁而优美；
无图片数量限制，可播放任意数量的图片；
可方便灵活地配置播放的动画效果，共32×8种，预览；
可随心所欲地改变播放器的样式；
采用UL的布局和img元素title属性作为标题，对搜索引擎支持友好；
支持切片播放和容器播放的事件扩展；
多浏览器支持：IE6+、FF、Chrome；

下载

Google Code：http://code.google.com/p/imgplayer/

使用它

DEMO

参数和方法

查看属性和方法

依赖脚本库

版本更新

jquery.fn.imgplayer 1.3(更新时间：2012-06-19):
1. 新增了标题栏显示开关，默认显示，可隐藏标题栏的功能；
2. 新增了animate属性，新增了动画效果；
3. 新增了可修改标题栏位置的功能；
4. 优化了参数的命名，player，play等；
5. 优化了容器一些基本的样式，修改了切换按钮的样式；
6. 优化了容器样式的继承等特性，可随心所欲地定义容器样式，例如去容器边框（默认有边框）；
7. 优化了随机动画的功能；
8. 修改了1.2版本中容器样式的Bug；
jquery.fn.imgplayer 1.2(更新时间：2010-02-24):
1. 修改了标题栏右侧冲出容器的bug；
2. 添加了duration参数，可自定义图片动画效果时间；
jquery.fn.imgplayer 1.1(更新时间：2009-09-23):
1. 修改了鼠标停留播放器和序号标签上图片继续播放的问题；

API：

jQuery图片播放器

属性

属性
showTitle	boolean	true	是否显示图片（img元素）中的title属性值，true表示显示
width	string	800px	播放器容器（div元素）的宽度，单位：像素
height	string	600px	播放器容器（div元素）的高度，单位：像素
time	number	2000	图片播放时间，单张切片播放的最长时间，单位：毫秒
divCSS	object	{'position':'relative','border':'1px solid #CCC','padding':'0px','fontSize':'12px','overflow':'hidden'}	播放器容器（div元素）的样式
imgCSS	object	{'position':'absolute','border':'none','z-index':'0','margin':'0px'}	图片（img元素）的样式
ulCSS	object	{'margin':'0px','padding':'0px','z-index':'10','position':'absolute','bottom':'2px','right':'2px','list-style-type':'none'}	切换按钮容器（ul元素）的样式
liCSS	object	{'font-family':'Arial','color':'#FFF','float':'left','border':'1px solid #eee','padding':'2px','width':'15px','height':'15px','text-align':'center','margin-left':'1px','cursor':'pointer','background-color':'#999','font-size':'100%'}	切换按钮（li元素）的样式
titleCSS	object	{'background-color':'#eee','position':'absolute','z-index':'9','line-height':'25px','font-weight':'700','padding':'0 5px','bottom':'0'}	标题栏（div元素）的样式
focusIdxCSS	object	{'background-color':'#F00','font-weight':'700'}	切换按钮（li元素）Mouseover时的样式
blurIdxCSS	object	{'background-color':'#999','font-weight':'normal'}	切换按钮（li元素）Mouseout时的样式
animate	object	{duration :500,method:'',direction:'',zoomRatio:5}	动画配置属性，具体见animate属性
方法
onStart	function		播放器在开始播放时执行的回调函数
onStop	function		播放器在停止播放时执行的回调函数
onShow	function		图片切换显示时执行的动画函数
onStop	function		图片切换隐藏时执行的动画函数
动画animate
duration	number	500	图片播放动画执行时间,建议此项小于time值的1/3,单位：毫秒
method	string	空字符串	动画效果，总共32种，默认随机
direction	string	空字符串	动画方向，总共8种，默认随机，zoomshow和zoomhide不支持随机
zoomRatio	number	5	采用zoomin或zoomout时的最大放大级别，默认5倍，大于等于零的浮点数