js viewer 图片浏览器

在这里插入图片描述

示例1

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><script src="js/viewer.min.js"></script><link rel="stylesheet" href="css/viewer.min.css"><body><ul id="jq22"><li><img data-original="img/1.png" src="img/1.png" alt="1"></li><li><img data-original="img/2.jpg" src="img/2.jpg" alt="2"></li><li><img data-original="img/3.jpg" src="img/3.jpg" alt="3"></li><li><img data-original="img/4.jpg" src="img/4.jpg" alt="4"></li><li><img data-original="img/5.jpg" src="img/5.jpg" alt="5"></li><li><img data-original="img/6.jpg" src="img/6.jpg" alt="6"></li></ul></body><script>var viewer = new Viewer(document.getElementById('jq22'), {url: 'data-original'});</script>
</html>

示例2

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><script src="js/viewer.min.js"></script><link rel="stylesheet" href="css/viewer.min.css"><body><button type="button" id = "button1">look</button></body><script>document.getElementById("button1").addEventListener('click', function() {var div = document.createElement('div');for (var i = 1; i < 7; i++) {  var img = document.createElement('img');  img.setAttribute("src", 'img/' + i + '.jpg');img.setAttribute("data-original", 'img/' + i + '.jpg');img.setAttribute("alt", i);div.appendChild(img); // 将 img 添加到 div 中  }var viewer = new Viewer(div, {hidden: function() {viewer.destroy();}});viewer.view(2);viewer.show();});</script>
</html>