<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>

#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%;
}

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();
    }
})