基于JQUERY 的图片查看插件

viewer是一款功能强大的图片查看器。它可以实现ACDsee等看图软件的部分功能。它可以对图片进行移动，缩放，旋转，翻转，可以前后浏览一组图片。该图片查看器还支持移动设备，支持键盘控制，功能十分强大。

 

 安装

可以通过nmp或bower来安装该图片查看器插件。

1.npm install imageviewer

2.bower install imageviewer 

 使用方法

使用该幻灯片插件需要引入jQuery(最好不要压缩mini版)，viewer.css和viewer.js文件。

<link rel="stylesheet" href="css/viewer.css" type="text/css">

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/viewer.js"></script> 

HTML结构

<!--单张图片-->
<div>
  <img class="image" src="picture.jpg" alt="Picture">
</div>
<!--一组图片-->
<div>
  <ul class="images">
    <li><img src="picture.jpg" alt="Picture"></li>
    <li><img src="picture-2.jpg" alt="Picture 2"></li>
    <li><img src="picture-3.jpg" alt="Picture 3"></li>
  </ul>
</div>  

View Code