imgplay-基于canvas的图片序列播放jQuery插件

简要教程

imgplay是一款基于HTML5 canvas的图片序列播放jQuery插件。通过该插件可以实现一组图片的轮流播放，你还可以进行暂停、快进、后退操作，并且可以进入全屏模式进行图片观看。

使用方法

使用该插件需要在页面中引入jquery.imgplay.css和jQuery和jquery.imgplay.js文件。

<link rel="stylesheet" type="text/css" href="css/jquery.imgplay.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.imgplay.js"></script>

HTML结构

该图片播放插件的HTML结构非常简单：使用一个

容器来包裹一组图片元素。图片可以使用src属性，也可以使用data-src属性。

<div id="imageplayer" class="imageplayer">
    <img src="img/1.jpg" />
    <img src="img/2.jpg" />
    <img src="img/3.jpg" />
    <img src="img/4.jpg" />
    <img src="img/5.jpg" />
    <img data-src="img/6.jpg" />
    <img data-src="img/7.jpg" />
    <img data-src="img/8.jpg" />
</div>

初始化插件

在页面DOM元素加载完毕之后，可以通过imgplay()方法来初始化该图片播放插件。

$(document).ready(function(){
   $('#imageplayer').imgplay();
});

配置参数

该图片播放插件有3个配置参数：

• name：图片播放器的名称，默认为：“imgplay”。

• rate：图片播放的频率，数值越大播放得越快。最大值为100，最小值为0.001。

• controls：是否显示控制按钮。

以上就是imgplay-基于canvas的图片序列播放jQuery插件的内容，更多相关内容请关注PHP中文网（www.php.cn）！

Label berkaitan：

imgplay，canvas，jQuery

sumber：php.cn

Artikel sebelumnya：基于SVG和CSS3的可爱卡通小动物动画特效 Artikel seterusnya：基于HTML5 Canvas和Rebound动画的Loading加载动画特效

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

• 从零开始打造自己的PHP框架的视频资料
  2023-03-15 16:54:01
• PHPMailer如何利用QQ邮箱完成邮件发送功能的实例分析
  2023-03-15 12:26:02
• php中关于IMAP如何收取邮件的方法介绍
  2023-03-14 18:58:01
• php如何快速实现数组去重的实例
  2023-03-14 11:30:01
• html中关于<a>标签的全部属性的使用总结
  1970-01-01 08:00:00
• php基础知识总结（新手入门必备）
  2023-03-16 15:20:01
• JavaScript中typeof的使用方法介绍
  1970-01-01 08:00:00
• JavaScript中confirm()方法的使用介绍
  1970-01-01 08:00:00
• HTML5 Placeholder属性的详情介绍
  1970-01-01 08:00:00
• ReactJS中表单的单选多选与反选的实现方法
  1970-01-01 08:00:00

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

0

3

2037

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

0

11

2197

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

0

1

1851

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...

daripada 2024-04-18 23:52:34

0

1

1744

Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus

daripada 2024-04-16 10:10:18

0

0

1763

Topik-topik yang berkaitan

Lagi>

• Apakah pemalam jquery?
• Bagaimana untuk mengendalikan json dengan jquery
• Apakah kaedah penghasilan penghasilan animasi html5?
• Bagaimana untuk memadam elemen dalam jquery
• Penggunaan kaedah jQuery hover().
• jquery melaksanakan kaedah paging
• Apakah elemen tersembunyi dalam jquery
• Apa yang ditonjolkan dalam jquery