viewer实现图片预览

插件描述：Viewer.js 是一款强大的图片查看器

1、引入文件

js版本

代码语言：javascript复制

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

jQuery 版本：

代码语言：javascript复制

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

2、HTML

代码语言：javascript复制

<ul id="dowebok">
    <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 版本：

代码语言：javascript复制

 var viewer =  new                       Viewer(document.getElementById('dowebok'), {
	  url: 'data-original'
    });

jQuery 版本：

代码语言：javascript复制

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

min script src viewer 插件

0 人点赞