imgplay-基於canvas的圖片序列播放jQuery插件-H5教程-PHP中文網

imgplay-基於canvas的圖片序列播放jQuery插件

黄舟

發布： 2017-01-19 13:51:58

原創

2021 人瀏覽過

簡短教學

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(){
   $(&#39;#imageplayer&#39;).imgplay();
});

登入後複製

設定參數

此圖片播放外掛程式有3個設定參數：

name：圖片播放器的名稱，預設為：「imgplay」。
rate：圖片播放的頻率，數值越大播放得越快。最大值為100，最小值為0.001。
controls：是否顯示控制按鈕。

以上就是imgplay-基於canvas的圖片序列播放jQuery插件的內容，更多相關內容請關注PHP中文網（m.sbmmt.com）！