介紹一款兼容移動(dòng)端和PC端的圖片滑動(dòng)切換展示效果—PhotoSwipe，PhotoSwipe是一款可以在移動(dòng)觸控設(shè)備上和PC桌面上完美運(yùn)行的免費(fèi)開源的圖像展示l類獨(dú)立的Javascript庫(kù),它基于HTML和Javascript實(shí)現(xiàn)，無需依賴任何第三方庫(kù)，可應(yīng)用于圖集、相冊(cè)展示等場(chǎng)景。

?

如何使用

PhotoSwipe獨(dú)立于其他js框架，可以非常方便的融入其他諸如CMS系統(tǒng)中。

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樣式，提供小圖標(biāo)和動(dòng)畫效果。

2.添加PhotoSwipe元素到DOM中

我們可以使用JS動(dòng)態(tài)的將html代碼添加到頁(yè)面中，也可以在頁(yè)面的</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都準(zhǔn)備好之后，使用js來調(diào)用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是指定位當(dāng)前圖片展示區(qū)域的元素，PhotoSwipeUI_Default是UI樣式，items是滑動(dòng)圖片組，數(shù)組形式，options是選項(xiàng)設(shè)置。

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

選項(xiàng)設(shè)置options

PhotoSwipe提供了豐富的選項(xiàng)設(shè)置，可以滿足各種開發(fā)需求。以下列舉一些常用的選項(xiàng)：

index：開始的滑塊（圖片），必須為數(shù)字，默認(rèn)0（第一張）

showHideOpacity：當(dāng)調(diào)用時(shí)是否展示透明度和比例變化動(dòng)畫，默認(rèn)false。

showAnimationDuration：展示動(dòng)畫過渡時(shí)間，默認(rèn)333，數(shù)字。

hideAnimationDuration：隱藏動(dòng)畫過渡間隔時(shí)間，默認(rèn)333，數(shù)字。

maxSpreadZoom：最大放大倍數(shù)。

loop：是否循環(huán)展示圖片，當(dāng)左右滑動(dòng)圖片時(shí)。

closeOnScroll：在頁(yè)面上滾動(dòng)關(guān)閉圖集， 僅適用于沒有硬件觸摸支持的設(shè)備。

escKey：是否可以使用Esc鍵關(guān)閉圖集，默認(rèn)true。

arrowKeys：是否可以使用左右方向鍵導(dǎo)航切換，默認(rèn)true。

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

galleryUID：當(dāng)多個(gè)圖集時(shí)，用來表示某個(gè)圖集，默認(rèn)1，數(shù)字，URL會(huì)變成http://example.com/#&gid=1&pid=2

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

preload：預(yù)加載，數(shù)組，默認(rèn)[1,1]，是指在切換圖片時(shí)，預(yù)先懶加載前后圖片的張數(shù)，不能小于1。

API方法

PhotoSwipe也提供了許多方法調(diào)用，以下方法有可能你會(huì)用得到：

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

????h:500??

});?

結(jié)束語(yǔ)

PhotoSwipe天生有著觸控特性，轉(zhuǎn)為觸摸設(shè)備而設(shè)計(jì)，支持手勢(shì)縮放、手勢(shì)滑動(dòng)切換和關(guān)閉。支持動(dòng)畫展示圖集，支持分享和下載圖片接口，支持懶加載圖片，支持桌面pc、移動(dòng)設(shè)備的主流瀏覽器。但是我們?cè)趹?yīng)用中需要注意以下兩點(diǎn)：

1.PhotoSwipe需要預(yù)定義的圖像尺寸，也就是說需要預(yù)先知道圖片的長(zhǎng)和寬。

2.避免為移動(dòng)設(shè)備提供大圖片（大于2000x1500像素），因?yàn)樗鼈儠?huì)大大降低動(dòng)畫性能，并可能導(dǎo)致崩潰（特別是在iOS Safari上）。

官網(wǎng)：http://photoswipe.com/

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。