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 | 定义图片播放器的高度 |
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!