Viewer.js是一款強大的圖片查看器，它支持觸摸事件、支持響應式、支持放大/縮小、支持旋轉(zhuǎn)、支持翻轉(zhuǎn)、支持圖片移動、支持鍵盤、支持縮略圖、支持標題顯示、支持多種自定義事件。

效果圖：

Viewer.js 有以下特點：

支持移動設備觸摸事件
支持響應式
支持放大/縮小
支持旋轉(zhuǎn)（類似微博的圖片旋轉(zhuǎn)）
支持水平/垂直翻轉(zhuǎn)
支持圖片移動
支持鍵盤
支持全屏幻燈片模式（可做屏保）
支持縮略圖
支持標題顯示
支持多種自定義事件
Viewer.js 提供了純 JS 版本和 jQuery 版本,版本名字雖然一樣，但代碼不一樣，不能通用。

注意：JS 版本兼容 IE9+，jQuery 版本兼容 IE8+。

下載

純JS版本：

下載地址：https://github.com/fengyuanchen/viewerjs

演示地址：http://demo.jb51.net/js/viewerjs/js/

jQuery 版本：

下載地址：https://github.com/fengyuanchen/jquery-viewer

演示地址：http://demo.jb51.net/js/viewerjs/jquery/

使用方法

1、引入文件

JS 版本：

<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>

注意：JS 版本和 jQuery 版本名字雖然一樣，但代碼不一樣，不能通用，請到 github 上下載需要的版本。

2、HTML

<ul id="jb51">
<li><img src="img/tibet-1.jpg" alt="圖片1"></li>
<li><img src="img/tibet-2.jpg" alt="圖片2"></li>
<li><img src="img/tibet-3.jpg" alt="圖片3"></li>
<li><img src="img/tibet-4.jpg" alt="圖片4"></li>
<li><img src="img/tibet-5.jpg" alt="圖片5"></li>
<li><img src="img/tibet-6.jpg" alt="圖片6"></li>
</ul>

3、JavaScript

JS 版本：

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

jQuery 版本：

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

更詳細的用法可以參考這篇文章：http://www.dbjr.com.cn/article/183978.htm