整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天給大家帶來的是一款基于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小時內與您取得聯系。
