整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天给大家带来的是一款基于H5的PPT播放和制作的软件系统。
我们先来看看系统的界面。
H5Slides是基于HTML5技术的幻灯片编辑、播放、控制的全套方案。
关于主题
关于运行
真正的做到了：轻量级并且功能强大！
相对于PPT而言，首先需要安装软件本身，还可能牵扯到版本问题，不兼容等。这样放映速度就不够及时。
同样的道理，用浏览器来放映就不会出现这些问题。除此之外，还可以非常简单便捷的分享给朋友。
当然，这款系统部分功能仍需要继续升级，但是对于大部分用户，已经够用了。这是一款开源软件，同学们可以自己动手去升级优化吧。
.引入方式：
npm方式： npm i -S photoswipe
import PhotoSwipe from 'photoswipe/dist/photoswipe'
import UI from 'photoswipe/dist/photoswipe-ui-default'
import 'photoswipe/dist/photoswipe.css'
import 'photoswipe/dist/default-skin/default-skin.css'
cdn方式：
<link rel="stylesheet" href="/path/default-skin/default-skin.css" />
<link rel="stylesheet" href="/path/default-skin/default-skin.css">
<script src="/path/photoswipe.min.js"></script>
<script src="/path/photoswipe-ui-default.min.js"></script>
2.预览的dom结构
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- Background of PhotoSwipe.
It's a separate element as animating opacity is faster than rgba(). -->
<div class="pswp__bg"></div>
<!-- Slides wrapper with overflow:hidden. -->
<div class="pswp__scroll-wrap">
<!-- Container that holds slides.
PhotoSwipe keeps only 3 of them in the DOM to save memory.
Don't modify these 3 pswp__item elements, data is added later on. -->
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<!-- Controls are self-explanatory. Order can be changed. -->
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share" title="Share"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
<!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
<!-- element will get class pswp__preloader--active when preloader is running -->
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
</button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
</button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
说明： dom结构不用改，复制直接使用
3.创建实例
new PhotoSwipe( pswpElement, UI, items, options).init();
参数说明：
pswpElement：预览dom结构的根节点 document.querySelector(".pswp")
UI ： 如上import 的 UI，或者 photoswipe-ui-default.js 暴露的 方法 PhotoSwipeUI_Default
items: 是个数组 格式如下
[{
src: '图片地址', w: '图片宽度', h: '图片高度', msrc: '图片地址',el: 图片的dom节点
}, {
src: '图片地址', w: '图片宽度', h: '图片高度', msrc: '图片地址'，el: 图片的dom节点
}]
options： 可配置的参数
常用配置如下：
options = {
index, //预览后图片的初始索引
loop: false,//是否闭环
mainClass: 'pswp--minimal--dark',
barsSize: {top:0,bottom:0},
fullscreenEl: false,//是否显示全屏按钮
shareEl: false,//是否显示分享按钮
bgOpacity: 0.9,//黑背景的透明度
tapToClose: true,//点击是否可关闭预览
tapToToggleControls: false,//点击应切换控件的可见性
history: false,//是否加记住历史的标识，为true时，点击预览会在url上加hash标识
errorMsg: '图片加载失败',
closeEl: false,//是否显示关闭按钮
arrowEl: false,//是否显示左右按钮
zoomEl: false,//是否显示放大按钮
getThumbBoundsFn: function(index) {//可控制图片与预览后图之间的移动效果
// See Options->getThumbBoundsFn section of docs for more info
var thumbnail = items[index].el.children[0],//当前点击的图片节点，根据实际去取
pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
rect = thumbnail.getBoundingClientRect();
return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
},
}
可再次对其自行封装成更适合自己的
预览图效果如下：
说明：每次点击图片后唤起预览图，需要重新再 new PhotoSwipe( pswpElement, UI, items, options).init();
vue方式的进一步封装的插件：vue-photo-preview
插件官方文档更全面： https://photoswipe.com/documentation/getting-started.html
托管JavaScript库并提供用于获取和打包它们的工具。
构架
断言
覆盖
Runner
模板引擎允许您执行字符串插值。
用于Web的数据可视化工具。
用于处理文件的库。
函数式编程库，用于扩展JavaScript的功能。
反应式编程库，以扩展JavaScript的功能。
数据结构库构建更复杂的应用程序。
日期库。
字符串库。
本地化（l10n）和国际化（i18n）JavaScript库。
用于指示负载状态的库。
键盘包装
旅游和指南
输入
日历
选择
文件上传器
其他
模态和弹出窗口
滚动
菜单
表/网格
你不懂JS - 可能是用现代JavaScript编写的最好的书，完全可以免费在线阅读，或者可以买来支持作者。
原文：https://github.com/sorrycc/awesome-javascript
本文：https://pub.intelligentx.net/collection-awesome-browser-side-javascript-libraries-resources-and-shiny-things
讨论：请加入知识星球或者小红圈【首席架构师圈】
*请认真填写需求信息，我们会在24小时内与您取得联系。
