介紹一款兼容移動端和PC端的圖片滑動切換展示效果—PhotoSwipe，PhotoSwipe是一款可以在移動觸控設備上和PC桌面上完美運行的免費開源的圖像展示l類獨立的Javascript庫,它基于HTML和Javascript實現，無需依賴任何第三方庫，可應用于圖集、相冊展示等場景。

?

如何使用

PhotoSwipe獨立于其他js框架，可以非常方便的融入其他諸如CMS系統中。

1.引入css和js文件。

你可以到github上下載最新源碼，也可以使用npm install photoswipe方式安裝。

<link?rel="stylesheet"?href="path/to/photoswipe.css">?? <link?rel="stylesheet"?href="path/to/default-skin/default-skin.css">??<script?src="path/to/photoswipe.min.js"></script>?? <script?src="path/to/photoswipe-ui-default.min.js"></script>?

除了加載photoswipe核心js和css外，我們還定制了photoswipe的UI樣式，提供小圖標和動畫效果。

2.添加PhotoSwipe元素到DOM中

我們可以使用JS動態的將html代碼添加到頁面中，也可以在頁面的</body>中直接添加html代碼。

<div?class="pswp"?tabindex="-1"?role="dialog"?aria-hidden="true">?<div?class="pswp__bg"></div>?<div?class="pswp__scroll-wrap">?<div?class="pswp__container">?<div?class="pswp__item"></div>?<div?class="pswp__item"></div>?<div?class="pswp__item"></div>?</div>?<div?class="pswp__ui?pswp__ui--hidden">?<div?class="pswp__top-bar">?<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>?<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>?

注意，上述代碼中的pswp__bg,?pswp__scroll-wrap,?pswp__container,?pswp__item不可隨意更改。

3.初始化

文件和DOM都準備好之后，使用js來調用PhotoSwipe：

var?pswpElement?=?document.querySelectorAll('.pswp')[0];?var?items?=?[?{?src:?'https://placekitten.com/600/400',?w:?600,?h:?400?},?{?src:?'https://placekitten.com/1200/900',?w:?1200,?h:?900?}? ];?var?options?=?{?index:?0?//?start?at?first?slide? };?var?gallery?=?new?PhotoSwipe(?pswpElement,?PhotoSwipeUI_Default,?items,?options);? gallery.init();?

很顯然，pswpElement是指定位當前圖片展示區域的元素，PhotoSwipeUI_Default是UI樣式，items是滑動圖片組，數組形式，options是選項設置。

通過new PhotoSwipe()就可調用了。

選項設置options

PhotoSwipe提供了豐富的選項設置，可以滿足各種開發需求。以下列舉一些常用的選項：

index：開始的滑塊（圖片），必須為數字，默認0（第一張）

showHideOpacity：當調用時是否展示透明度和比例變化動畫，默認false。

showAnimationDuration：展示動畫過渡時間，默認333，數字。

hideAnimationDuration：隱藏動畫過渡間隔時間，默認333，數字。

maxSpreadZoom：最大放大倍數。

loop：是否循環展示圖片，當左右滑動圖片時。

closeOnScroll：在頁面上滾動關閉圖集， 僅適用于沒有硬件觸摸支持的設備。

escKey：是否可以使用Esc鍵關閉圖集，默認true。

arrowKeys：是否可以使用左右方向鍵導航切換，默認true。

history：是否使用history模式，默認true，歷史記錄模式支持url返回。

galleryUID：當多個圖集時，用來表示某個圖集，默認1，數字，URL會變成http://example.com/#&gid=1&pid=2

galleryPIDs：表示某一張圖片，配合圖集galleryUID一起使用。

preload：預加載，數組，默認[1,1]，是指在切換圖片時，預先懶加載前后圖片的張數，不能小于1。

API方法

PhotoSwipe也提供了許多方法調用，以下方法有可能你會用得到：

var?pswp?=?new?PhotoSwipe(?/*?...?*/?);?pswp.init();?//初始化? pswp.goTo(index);?//跳到第幾張圖? pswp.next();?//下一張? pswp.prev();?//上一張? pswp.close();?//關閉圖集? pswp.destroy();?//關閉圖集后銷毀圖集?//?動態添加圖片? pswp.items.push({?src:?"path/to/image.jpg",??w:1200,?

????h:500??

});?

結束語

PhotoSwipe天生有著觸控特性，轉為觸摸設備而設計，支持手勢縮放、手勢滑動切換和關閉。支持動畫展示圖集，支持分享和下載圖片接口，支持懶加載圖片，支持桌面pc、移動設備的主流瀏覽器。但是我們在應用中需要注意以下兩點：

1.PhotoSwipe需要預定義的圖像尺寸，也就是說需要預先知道圖片的長和寬。

2.避免為移動設備提供大圖片（大于2000x1500像素），因為它們會大大降低動畫性能，并可能導致崩潰（特別是在iOS Safari上）。

官網：http://photoswipe.com/

github：https://github.com/dimsemenov/photoswipe

總結

以上是生活随笔為你收集整理的移动端和PC端都兼容的图片滑动切换展示效果—PhotoSwipe的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。