簡介

Viewer.js 是一款強大的圖片查看器

Viewer.js 有以下特點：

• 支持移動設備觸摸事件


• 支持響應式


• 支持放大/縮小


• 支持旋轉（類似微博的圖片旋轉）


• 支持水平/垂直翻轉


• 支持圖片移動


• 支持鍵盤


• 支持全屏幻燈片模式（可做屏保）


• 支持縮略圖


• 支持標題顯示


• 支持多種自定義事件

Viewer.js 提供了純 JS 版本和 jQuery 版本,版本名字雖然一樣，但代碼不一樣，不能通用。

在線演示及下載

在線演示：http://www.jqhtml.com/wp-content/uploads/2017/05/wz/Viewer.js/

下載頁面

使用方法

引入文件
Javascript版:

<link rel="stylesheet" href="css/viewer.min.css">
<script src="js/viewer.min.js"></script>
 

jQuery版:

<link rel="stylesheet" href="css/viewer.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/viewer.min.js"></script>

Html結構

<ul id="viewer">
    <li><img src="img/viewer1.jpg" alt="圖片1"></li>
    <li><img src="img/viewer2.jpg" alt="圖片2"></li>
    <li><img src="img/viewer3.jpg" alt="圖片3"></li>
    <li><img src="img/viewer4.jpg" alt="圖片4"></li>
    <li><img src="img/viewer5.jpg" alt="圖片5"></li>
    <li><img src="img/viewer6.jpg" alt="圖片6"></li>
</ul>
 

JavaScript
Javascript版：

var viewer = new Viewer(document.getElementById('viewer'));

jQuery 版：

$('#viewer').viewer();

配置

強大的jQuery圖片查看器插件Viewer.js