jQuery图片播放器 1.3

以下内容来自：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/

使用它

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.fn.imgplayer.js"></script>
<script type="text/javascript">
　　$("#imgplayer_container_id").player().play(); //.player为jQuery扩展的方法，用来实例化一个容器为播放器
</script>

DEMO

• Demo. 目录
• Demo 01. 快速入门
• Demo 02. 改变容器大小
• Demo 03. 改变容器中切片的播放周期
• Demo 04. 隐藏标题栏
• Demo 05. 改变容器样式——移除边框和改变容器默认字体的颜色
• Demo 06. 改变标题栏的位置
• Demo 07. 改变播放按钮聚焦样式
• Demo 08. 动画 - 基本动画
• Demo 09. 动画 - 基本动画2：水平、垂直
• Demo 10. 动画 - 高级动画 - 动画插件的使用

参数和方法

• 查看属性和方法

依赖脚本库

• jQuery[必须]
• jquery.effects.core.js[非必须，仅高级动画效果需要]

版本更新

• 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倍，大于等于零的浮点数