====== Swiper相册 ======

===== html部分 =====
  <div class="thumb" thumblist="list1">
      <img src="uploads/s1_1.jpg">
      <img src="uploads/s1_2.jpg">
      <img src="uploads/s1_3.jpg">
      <img src="uploads/s1_4.jpg">
  </div>
  <div class="swiper-container" id="origin-img">
      <div class="swiper-wrapper"></div>
      <div class="swiper-pagination"></div>
      <div class="upload">xxx上传于2018-06-17</div>
  </div>
  
===== CSS部分 =====
  #origin-img {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #000;
  }
  #origin-img .swiper-slide img {
      width: 100%;
      vertical-align: middle;
  }
  #origin-img .swiper-pagination {
      top: 1em;
      bottom: auto;
      color: #fff;
  }
  #origin-img .upload {
      position: absolute;
      bottom: 0;
      line-height: 3em;
      background: rgba(0, 0, 0, .5);
      z-index: 5;
      color: #fff;
      text-indent: 1em;
      width: 100%;
  }
  
===== JS部分 =====
  var imgsdata = {
      "list1": ["b1_1.jpg", "b1_2.jpg", "b1_3.jpg", "b1_4.jpg", "b1_5.jpg", "b1_6.jpg", "b1_7.jpg", "b1_8.jpg", "b1_9.jpg"],
      "list2": ["b2_1.jpg", "b2_2.jpg"],
      "list3": ["b3_1.jpg"],
  }
  var swiper = new Swiper('.swiper-container', {
      zoom: true,
      width: window.innerWidth,
      virtual: true,
      spaceBetween: 20,
      pagination: {
          el: '.swiper-pagination',
          type: 'fraction',
      },
      on: {
          click: function() {
              $('#origin-img').fadeOut('fast');
              this.virtual.slides.length = 0;
              this.virtual.cache = [];
              swiperStatus = false;
          },
      },
  });
  $('.thumb img').click(function() {
      clickIndex = $(this).index();
      imglist = $(this).parent().attr('thumblist');
      imgs = imgsdata[imglist];
      for (i = 0; i < imgs.length; i++) {
          swiper.virtual.appendSlide('<div class="swiper-zoom-container"><img src="uploads/' + imgs[i] + '" /></div>');
      }
      swiper.slideTo(clickIndex);
      $('#origin-img').fadeIn('fast');
      swiperStatus = true;
  })
  //切换图状态禁止页面缩放 
  document.addEventListener('touchstart', function(event) {
      if (event.touches.length > 1 && swiperStatus) {
          event.preventDefault();
      }
  })
  var lastTouchEnd = 0;
  document.addEventListener('touchend', function(event) {
      var now = (new Date()).getTime();
      if (now - lastTouchEnd <= 300) {
          event.preventDefault();
      }
      lastTouchEnd = now;
  }, false)
  document.addEventListener('touchmove', function(e) {
      if (swiperStatus) {
          e.preventDefault();
      }
  })