介绍

Viewer.js 是一款强大的图片查看器。我们通过Viewer.js 在页面上添加强大的图片查看功能，同时，这款优秀的插件配置操作起来也非常的方便。这是作者github地址：https://github.com/fengyuanchen/viewerjs 下图即为插件的演示样式：

特点

• 支持移动设备触摸事件
• 支持响应式
• 支持放大/缩小
• 支持旋转（类似微博的图片旋转）
• 支持水平/垂直翻转
• 支持图片移动
• 支持键盘
• 支持全屏幻灯片模式（可做屏保）
• 支持缩略图
• 支持标题显示
• 支持多种自定义事件

如何使用？

可以直接引入cdn链接或者下载到本地引入：

代码语言：javascript

代码运行次数：0

运行

AI代码解释

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.10.0/viewer.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.10.0/viewer.min.js"></script>

代码语言：javascript

代码运行次数：0

运行

AI代码解释

<ul id="viewer">
  <li><img width="500" src="frontPage/img/d4092c6f30206b5792721d06ae2a2483.jpg" alt="1"></li>
  <li><img width="500" src="frontPage/img/d4092c6f30206b5792721d06ae2a2483.jpg" alt="2"></li>
  <li><img width="500" src="frontPage/img/d4092c6f30206b5792721d06ae2a2483.jpg" alt="3"></li>
  <li><img width="500" src="frontPage/img/d4092c6f30206b5792721d06ae2a2483.jpg" alt="4"></li>
  <li><img width="500" src="frontPage/img/d4092c6f30206b5792721d06ae2a2483.jpg" alt="5"></li>
  <li><img width="500" src="frontPage/img/d4092c6f30206b5792721d06ae2a2483.jpg" alt="6"></li>
</ul>
<script type="text/javascript">
  // 用法实例
 new Viewer(document.getElementById('viewer'),{

   title: false,
   rotatable: false,
   scalable: false,
   fullsreen: false,
   zoomRatio: 0.5,
  });
</script>

new Viewer的参数说明