版本图片地点免费素材下载 viewer.js图象查看器

Viewer.js是一款弱小的图片查看器，它支持触摸事情、支持呼应式、支持放年夜/减少、支持旋转、支持翻转、支持图片挪动、支持键盘、支持缩略图、支持题目显示、支持多种自界说事情。

成果图：

支持挪动设施触摸事情
支持呼应式
支持放年夜/减少
支持旋转（相似微博的图片旋转）
支持程度/垂直翻转
支持图片挪动
支持键盘
支持全屏幻灯片模式（可做屏保）
支持缩略图
支持题目显示
支持多种自界说事情
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/

一、引入文件

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 上下载需求的版本。

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

三、JavaScript

JS 版本：

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

jQuery 版本：

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

更具体的用法能够参考这篇文章：https://www.jb51.net/article/183978.htm