图片/图形
jquery Image Player 图片播放功能jQuery插件
PetitQ
jquery Image Player 是一款可以像视频播放一样逐张播放图片的图片播放器 jQuery 插件。当你需要介绍你的某个产品和项目的时候，这个插件就可以发挥它的强大作用。你可以将产品或项目的各个功能做成图片，然后使用该插件来逐帧播放。
现在大多数的产品和项目介绍使用的都是 gif 图片或 flash，甚至是直接嵌入视频，使用这个图片播放器插件，你可以自由的控制哪张图片需要播放，还可以设置淡入淡出效果，图片滑动效果，图片标题等等。
也想出现在这里？联系我们吧
使用方法
使用这个播放图片器插件需要引入 jQuery（需要 1.7+版本）、jquery-ui.min.js、jquery-image-player-min.js 以及 jquery-image-player-min.css 文件。
<!-- Important jquery image player stylesheet -->
<link rel="stylesheet" href="jquery-image-player-min.css">
<!-- jQuery 1.7+ -->
<script src="jquery-1.9.1.min.js"></script>
<!-- jQuery 1.8+ -->
<script src="jquery-ui.min.js"></script>
<!-- Include js plugin -->
<script src="jquery-image-player-min.js"></script>
HTML 结构
该图片播放器插件的 HTML 结构使用的是无序列表几个，外部可以使用一个<div>作为包裹容器。
<div id="uipg-video-player">
<ul>
<li data-duration="0">Your Content</li>
<li data-duration="1000">Your Content</li>
<li data-duration="1000">Your Content</li>
<li data-duration="1000">Your Content</li>
<li data-duration="1000">Your Content</li>
<li data-duration="1000">Your Content</li>
<li data-duration="1000">Your Content</li>
</ul>
</div>
无序列表中的每一个<li>元素都要指定 data-duration 属性。外层包裹元素会被强制性的使用 jquery-image-player-min.css 文件中指定的样式。
调用插件
在页面加载完毕之后就可以通过下面的方法来调用这个图片播放器插件：
$(document).ready(function(){
$("#uipg-video-player").jsVideoPlayer();
});
配置参数
下面是该图片播放器插件的可用参数：
| 参数 | 默认值 | 类型 | 描述 |
| showTitle | true | boolean | 是否在控制栏显示"title"的图标 |
| showCurrentTime | true | boolean | 是否在控制栏显示"current time"标签 |
| showTotalTime | true | boolean | 是否在控制栏显示"total time"标签 |
| showSliderTime | true | boolean | 是否在控制栏显示"slider time"标签 |
| onFinishGotoStart | false | boolean | 是否在播放完一次图片后回到开始屏幕 |
| playerWidth | 900 | int | 定义图片播放器的宽度 |
| playerHeight | 385 | int | 定义图片播放器的高度 |
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
