jQuery实现类似视频播放功能的图片播放器插件

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	定义图片播放器的高度