效果图
插件官网
https://blog.51cto.com/transfer?https://github.com/fengyuanchen/viewer
使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/viewer.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<ul id="dowebok">
<li><img data-original="images/tibet-1.jpg" src="images/thumbnails/tibet-1.jpg" alt="Cuo Na Lake"></li>
<li><img data-original="images/tibet-2.jpg" src="images/thumbnails/tibet-2.jpg" alt="Tibetan Plateau"></li>
<li><img data-original="images/tibet-3.jpg" src="images/thumbnails/tibet-3.jpg" alt="Jokhang Temple"></li>
<li><img data-original="images/tibet-4.jpg" src="images/thumbnails/tibet-4.jpg" alt="Potala Palace 1"></li>
<li><img data-original="images/tibet-5.jpg" src="images/thumbnails/tibet-5.jpg" alt="Potala Palace 2"></li>
<li><img data-original="images/tibet-6.jpg" src="images/thumbnails/tibet-6.jpg" alt="Potala Palace 3"></li>
<li><img data-original="images/tibet-7.jpg" src="images/thumbnails/tibet-7.jpg" alt="Lhasa River"></li>
<li><img data-original="images/tibet-8.jpg" src="images/thumbnails/tibet-8.jpg" alt="Namtso 1"></li>
<li><img data-original="images/tibet-9.jpg" src="images/thumbnails/tibet-9.jpg" alt="Namtso 2"></li>
</ul>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/viewer.js"></script>
<script>
$(function(){
$("#dowebok").viewer();
});
</script>
</body>
</html>
特别说明：里面不用局限于ul li这种布局，你直接在body上写$("body").viewer();都可以，他会自动读取所有的图片
