轮播放大图片photoswiper插件

<!doctype html>
<html lang="zh-cn">
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta charset="UTF-8">
<head>
    <title>photoswiper插件</title>
</head>
<body>
    <div id="div1"></div>
<link href="../photoswipe/photoswipe.css" rel="stylesheet" />
<link href="../photoswipe/default-skin.css" rel="stylesheet" />
<script  src="../photoswipe/photoswipe.min.js"></script>
<script  src="../photoswipe/photoswipe-ui-default.min.js"></script>
<script>
 var items=[];
 /*此处为后台返回给你的图片地址*/
 var data=[{
   img:"https://office-cs-upload.hs350.com/default/20181206/093202.jpg"
  },
  {
   img:'https://office-cs-upload.hs350.com/default/20181015/171537.png'
  },
  {
   img:"https://office-cs-upload.hs350.com/default/20180926/115215.jpg"
  },{
   img:"https://office-cs-upload.hs350.com/default/20181016/174145.png"
  },{
   img:"https://office-cs-upload.hs350.com/video/picture/20181122/094301.png"
  }];
 var openPhotoSwipe = function(curentindex) {
  var pswpElement = document.querySelectorAll('.pswp')[0];
  var options = {
    history : false,
    focus : false,
    index : curentindex,
    showAnimationDuration : 0,
    hideAnimationDuration : 0
  };
  var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
  gallery.init();
 };
// openPhotoSwipe();
 document.getElementById('btn').onclick = function(){
  var imgcount=0;
  $.each(data, function(index,value) {
   items = [];
   var img = new Image();
   img.src = value.img;
   img.onload = function(event) {
    var nobj = {};
    imgcount++;
    nobj.src = data[index].img;
    nobj.h = event.currentTarget.height;
    nobj.w = event.currentTarget.width;
    items.push(nobj);
    if (imgcount == data.length) {
     var a = '<div id="gallery" class="pswp" tabindex="-1" role="dialog" aria-hidden="true"><div class="pswp__bg"/> <div class="pswp__scroll-wrap">  <div class="pswp__container"><div class="pswp__item"/><div class="pswp__item"/><div class="pswp__item"/>  </div>  <div class="pswp__ui pswp__ui--hidden"> <div class="pswp__top-bar"> <div class="pswp__counter" style="padding-top:10px;"/>   <button class="pswp__button pswp__button--close" title="Close (Esc)" style="margin-top:10px;"/>  <button class="pswp__button pswp__button--zoom" title="Zoom in/out"/>  <div class="pswp__preloader"> <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut">  <div class="pswp__preloader__donut"/> </div> </div> </div> </div>   <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> <div class="pswp__share-tooltip"/> </div>   <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"/>  <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"/>   <div class="pswp__caption">  <div class="pswp__caption__center"/>  </div> </div>  </div>  </div> ';
     $("#div1").append($(a));
     openPhotoSwipe(0);
    }
   };
  });
 };
</script>
</body>
</html>

插件地址 http://photoswipe.com/documentation/getting-started.html