介紹

PhotoSwipe是一個JavaScript庫，沒有依賴項。要說唯一的依賴項那就是Vanilla.js(原生js),因此你可以在你的任何Web項目中使用，包括主流的Vue、React、Angular以及傳統jQuery的項目。PhotoSwipe可以被用到各種大中小型項目當中，并且PC和移動端完美支持！

Github

https://github.com/dimsemenov/photoswipe

觸控手勢

支持所有基本手勢：輕拂到下一個或上一個圖像，展開以放大，拖動以平移，縮小或關閉，單機切換，雙擊以縮放。

• 展開以放大圖像

PhotoSwipe是第一個支持基于JavaScript的圖像縮放的開源畫廊。即使已禁用瀏覽器的本機縮放，圖像縮放仍將起作用。

• 伸縮關閉畫廊(看圖)

用戶放大時，畫廊的背景將逐漸淡出。手勢完成后，圖庫將關閉。

• 垂直滑動即可關閉圖庫

之所以添加手勢，是因為用一只手握住高大的移動設備可能很難觸及右上角的關閉按鈕。

• 水平滑動即可切換項目

即使縮放當前幻燈片，也可以更改圖像。過渡期間不會阻止切換。

瀏覽器歷史記錄API

PhotoSwipe記錄瀏覽器的歷史記錄，以便用戶可以鏈接到每個圖庫項目并通過“后退”按鈕關閉圖庫。關閉畫廊時，將恢復初始URL。

• “返回”按鈕關閉圖庫

當畫廊打開時，PhotoSwipe會添加一個歷史記錄，允許用戶通過瀏覽器的“后退”按鈕將其關閉。

• 每個圖庫項目的唯一URL

用戶可以共享并鏈接到每個圖像。哈希后綴有兩個額外的參數：(gid畫廊索引)和pid(圖片索引)。此功能作為模塊提供。可以將其完全排除在構建之外，也可以對其進行分叉以滿足產品URL結構的要求。

加載和顯示圖像

PhotoSwipe產生了更快加載的錯覺。

• 隨著數據到達，圖像逐漸顯示

照片會在完全加載之前顯示。在觸摸設備上禁用此功能，因為它可能導致滑動過渡滯后。

• 低分辨率圖像會立即顯示，然后拉伸到完整尺寸

將縮略圖的源傳遞到PhotoSwipe，PhotoSwipe將立即顯示它，并將完整尺寸的圖像加載到頂部。

• 智能加載指示器

僅使用拉伸的縮略圖或灰色占位符，整個圖像逐漸加載到頂部

• 縮放動畫

打開畫廊的縮放過渡并不是僅僅出于奇特的效果。圖像在動畫之前開始加載，因此使用快速連接的用戶甚至可能不會注意到正在加載某些內容。

• 智能延遲加載

PhotoSwipe會根據用戶移動的方向加載相鄰圖像?？梢钥刂仆ㄟ^API預加載多少張圖片。

• 響應圖像支持

由于圖庫中的圖像是動態加載的，因此您可以傳遞適合用戶窗口大小和DPI的源。

• 點擊放大圖片

PhotoSwipe模擬瀏覽器圖像查看器的默認行為

如果圖像小于視口，則PhotoSwipe將在圖像上方顯示縮放光標，并在頂部欄中顯示縮放圖標。

• 通過滾輪或觸控板平移或拖動來平移

放大圖像時，用戶可以通過鼠標滾輪或觸控板或通過拖動來平移圖像。而且，如果需要擴展此功能，則可以使用該API。

使用

可以通過文檔查看詳細的使用方法

Enjoy it！

總結

以上是生活随笔為你收集整理的pc端jquery左右按钮控制带缩略图的图片切换代码_Web开发实用的图片预览插件，简单零依赖——PhotoSwipe...的全部內容，希望文章能夠幫你解決所遇到的問題。

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