JK GIF Player是一个通用的jQuery GIF操作插件，允许您轻松操作GIF播放、计算GIF属性和处理播放/暂停事件。

如何使用它:

1.要开始，请在jQuery项目中加载JK GIF Player插件的文件。

<link rel="stylesheet" href="/path/to/dist/jquery.jk-gifplayer.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery.jk-gifplayer.js"></script>

2.在数据gif属性：

<div class="gifimage" data-gif="/path/to/gif/">
</div>

3.初始化GIF容器上的插件并完成。此插件将自动禁用此GIF图像的自动播放，直到用户单击播放图标。

$(function(){ 
  $(".gifimage").JKGifPlayer();
});

4.更改GIF循环计数。默认值：5。

$(".gifimage").JKGifPlayer({
  autoplay: true,
  autopause: true,
  loops: 2
});

5.获取GIF图像的属性。

$(".gifimage").each(function(){
  console.log($(this).GetSize_Gif());
  console.log($(this).GetHeight_Gif());
  console.log($(this).GetWidth_Gif());
  console.log($(this).GetDuration_Gif() + " seconds");
  console.log($(this).GetDurationMili_Gif() + " miliseconds");
});

6.事件处理程序。

$(document).on('play.JK_Gif', '.gifimage', function(e) {
  console.log("play");
});
 
$(document).on('stop.JK_Gif', '.gifimage', function(e) {
  console.log("stop");
});

7.覆盖默认HTML数据用于保存GIF的属性。默认值：“gif”。

$(".gifimage").JKGifPlayer({
  data: "image",
});

<div class="gifimage" data-image="/path/to/gif/">
</div>

预览截图

以程序方式播放/停止GIF图像 jQuery JK GIF播放器