【前端】使用jQuery播放图片，类似播放幻灯片一样
一、需求
有时候我们想在手机或者电脑上，实现播放PPT的功能，搜了一些方法好像没有直接可以播放PPT的插件，大多思路是先把PPT转换成图片，再去对图片进行操作（播放图片），这样就可以实现播放图片像播放PPT的效果了。
二、效果图
先看效果图，比较好理解，这里使用的是图片，模仿PPT播放的效果，有全屏、小图、自动翻页、放大、缩小的功能。
三、把PPT转换成图片
如果PPT转换图片的步骤：
① 把PPT转成或导出PDF
② 把PDF转换成图片
③ 播放图片
把PDF转换成图片可以参看这篇文章，写的很详细【Imagick扩展】PHP实现PDF转图片_imagick pdf转图片-CSDN博客
四、图片播放插件
要想实现播放图片需要下载下面的几个插件
https://download.csdn.net/download/qq_25285531/91602104
https://download.csdn.net/download/qq_25285531/91602104
五、代码实现
一些css和js资源都在上面，可以直接下载使用并替换自己实际的位置。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>强大的jQuery幻灯片播放插件DEMO演示</title><link rel="stylesheet" type="text/css" href="/static/index/css/lightgallery.min.css">
<style>body{background-color: #152836}.demo-gallery > ul {margin-bottom: 0;}.demo-gallery > ul > li {float: left;margin-bottom: 15px;margin-right: 20px;width: 200px;}.demo-gallery > ul > li a {border: 3px solid #FFF;border-radius: 3px;display: block;overflow: hidden;position: relative;float: left;}.demo-gallery > ul > li a > img {-webkit-transition: -webkit-transform 0.15s ease 0s;-moz-transition: -moz-transform 0.15s ease 0s;-o-transition: -o-transform 0.15s ease 0s;transition: transform 0.15s ease 0s;-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);height: 100%;width: 100%;}.demo-gallery > ul > li a:hover > img {-webkit-transform: scale3d(1.1, 1.1, 1.1);transform: scale3d(1.1, 1.1, 1.1);}.demo-gallery > ul > li a:hover .demo-gallery-poster > img {opacity: 1;}.demo-gallery > ul > li a .demo-gallery-poster {background-color: rgba(0, 0, 0, 0.1);bottom: 0;left: 0;position: absolute;right: 0;top: 0;-webkit-transition: background-color 0.15s ease 0s;-o-transition: background-color 0.15s ease 0s;transition: background-color 0.15s ease 0s;}.demo-gallery > ul > li a .demo-gallery-poster > img {left: 50%;margin-left: -10px;margin-top: -10px;opacity: 0;position: absolute;top: 50%;-webkit-transition: opacity 0.3s ease 0s;-o-transition: opacity 0.3s ease 0s;transition: opacity 0.3s ease 0s;}.demo-gallery > ul > li a:hover .demo-gallery-poster {background-color: rgba(0, 0, 0, 0.5);}.demo-gallery .justified-gallery > a > img {-webkit-transition: -webkit-transform 0.15s ease 0s;-moz-transition: -moz-transform 0.15s ease 0s;-o-transition: -o-transform 0.15s ease 0s;transition: transform 0.15s ease 0s;-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);height: 100%;width: 100%;}.demo-gallery .justified-gallery > a:hover > img {-webkit-transform: scale3d(1.1, 1.1, 1.1);transform: scale3d(1.1, 1.1, 1.1);}.demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img {opacity: 1;}.demo-gallery .justified-gallery > a .demo-gallery-poster {background-color: rgba(0, 0, 0, 0.1);bottom: 0;left: 0;position: absolute;right: 0;top: 0;-webkit-transition: background-color 0.15s ease 0s;-o-transition: background-color 0.15s ease 0s;transition: background-color 0.15s ease 0s;}.demo-gallery .justified-gallery > a .demo-gallery-poster > img {left: 50%;margin-left: -10px;margin-top: -10px;opacity: 0;position: absolute;top: 50%;-webkit-transition: opacity 0.3s ease 0s;-o-transition: opacity 0.3s ease 0s;transition: opacity 0.3s ease 0s;}.demo-gallery .justified-gallery > a:hover .demo-gallery-poster {background-color: rgba(0, 0, 0, 0.5);}.demo-gallery .video .demo-gallery-poster img {height: 48px;margin-left: -24px;margin-top: -24px;opacity: 0.8;width: 48px;}.demo-gallery.dark > ul > li a {border: 3px solid #04070a;}.home .demo-gallery {padding-bottom: 80px;}
</style></head>
<body class="home">
<div class="demo-gallery"><ul id="lightgallery" class="list-unstyled row"><li class="col-xs-6 col-sm-4 col-md-3" data-responsive="/uploads/pdf_image/测试/68b4b851d4363cb4b863a282971fe8a9.png" data-src="/uploads/pdf_image/测试/68b4b851d4363cb4b863a282971fe8a9.png"><a href=""><img class="img-responsive" src="/uploads/pdf_image/测试/68b4b851d4363cb4b863a282971fe8a9.png" alt="/uploads/pdf_image/测试/68b4b851d4363cb4b863a282971fe8a9.png"></a></li><li class="col-xs-6 col-sm-4 col-md-3" data-responsive="/uploads/pdf_image/测试/5dff232aabdf57efe820c957f4ea5a3f.png" data-src="/uploads/pdf_image/测试/5dff232aabdf57efe820c957f4ea5a3f.png"><a href=""><img class="img-responsive" src="/uploads/pdf_image/测试/5dff232aabdf57efe820c957f4ea5a3f.png" alt="/uploads/pdf_image/测试/5dff232aabdf57efe820c957f4ea5a3f.png"></a></li><li class="col-xs-6 col-sm-4 col-md-3" data-responsive="/uploads/pdf_image/测试/baf77df26e41a22f1c2b1f582bd385a8.png" data-src="/uploads/pdf_image/测试/baf77df26e41a22f1c2b1f582bd385a8.png"><a href=""><img class="img-responsive" src="/uploads/pdf_image/测试/baf77df26e41a22f1c2b1f582bd385a8.png" alt="/uploads/pdf_image/测试/baf77df26e41a22f1c2b1f582bd385a8.png"></a></li><li class="col-xs-6 col-sm-4 col-md-3" data-responsive="/uploads/pdf_image/测试/5e67de4fca7b9d52a61e029ca90cb8a1.png" data-src="/uploads/pdf_image/测试/5e67de4fca7b9d52a61e029ca90cb8a1.png"><a href=""><img class="img-responsive" src="/uploads/pdf_image/测试/5e67de4fca7b9d52a61e029ca90cb8a1.png" alt="/uploads/pdf_image/测试/5e67de4fca7b9d52a61e029ca90cb8a1.png"></a></li><li class="col-xs-6 col-sm-4 col-md-3" data-responsive="/uploads/pdf_image/测试/0fb814614a93cd11aee196af866212db.jpg" data-src="/uploads/pdf_image/测试/0fb814614a93cd11aee196af866212db.jpg"><a href=""><img class="img-responsive" src="/uploads/pdf_image/测试/0fb814614a93cd11aee196af866212db.jpg" alt="/uploads/pdf_image/测试/0fb814614a93cd11aee196af866212db.jpg"></a></li></ul>
</div><script src="/static/index/js/picturefill.min.js"></script>
<script src="/static/index/js/lightgallery.js"></script>
<script src="/static/index/js/lg-pager.js"></script>
<script src="/static/index/js/lg-autoplay.js"></script>
<script src="/static/index/js/lg-fullscreen.js"></script>
<script src="/static/index/js/lg-zoom.js"></script>
<script src="/static/index/js/lg-share.js"></script><script>lightGallery(document.getElementById('lightgallery'));
</script></body>
</html>