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 | 定义图片播放器的高度 |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现