001-封装一个图片查看器

#big-img-box {
        position: fixed;
        background: #000;
        top: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 140;
    }
    #big-img-box em {
        font-size: 24px;
        margin-top: 5%;
        display: block;
        color: #fff;
        width: 56px;
        text-align: center;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
    }
    #big-img-box img{
        position: absolute;
        left: 50%;
        top: 45%;
        transform: translate(-50%,-50%);
        display: block;
        max-width: 100%;
        max-height: 52%;
    }

<div id="big-img-box" class="swiper-container d_none">
    <em> &lt; </em>
    <div class="swiper-wrapper">
        {{*<div class="swiper-slide"><img src=""></div>*}}
    </div>
    <div class="swiper-pagination"></div>
</div>

// swiper
    window.bigImgSwiper = new Swiper('#big-img-box', {
        pagination: "#big-img-box .swiper-pagination",
        paginationType: "progress",
        observer: true,
        observeParents: true
    });

    var BigImg = {
        wrapId: "#big-img-box",
        clickIndex: 0,
        closeBigImg: function () {
            // 隐藏大图盒子
            $(this.wrapId).click(function () {
                $(this).hide();
            });
            // 阻止冒泡
            $(this.wrapId).on("click", "img", function (e) {
                e = e || event;
                e.stopPropagation();
            });
        },
        /**
         * 查看大图
         * @param smallImg      小图的class或节点名
         * @param smallImgBox   小图盒子的class或节点名
         * @param smallImgWrap  小图盒子容器的class或节点名
         */
        showBigImg: function (smallImg, smallImgBox, smallImgWrap) {
            var self = this;
            $(smallImg).click(function () {
                // 当前点击的图片索引
                self.clickIndex = $(this).parents(smallImgBox).index();
                // 当前盒子中的图片路径
                var src_arr = [];
                $(this).parents(smallImgWrap).find(smallImgBox).each(function () {
                    var maxsrc = $(this).find("img").attr("maxsrc");
                    var src = maxsrc ? maxsrc : $(this).find("img").attr("src");
                    src_arr.push(src);
                });
                // 初始化DOM结构
                self.initDom(src_arr);
            })
        },
        /**
         * 初始化DOM结构
         * @param src 存放src的数组
         */
        initDom: function (src) {
            var slide = "<div class='swiper-slide'><img src=''></div>";
            var html = "";
            for(var i=0; i<src.length; i++){
                html += "<div class='swiper-slide'><img src='"+ src[i] +"'></div>";
            }
            $(this.wrapId).find(".swiper-wrapper").empty().append(html);
            // 显示大图片盒子
            this.showWrap();
        },
        /**
         * 显示盒子，并重置swiper参数初始化
         *  activeIndex
         */
        showWrap: function () {
            // 定位到点击的图片
            window.bigImgSwiper.activeIndex = this.clickIndex;
            $(this.wrapId).show();
        }
    };
    $(function () {
        BigImg.showBigImg(".js-small-img", ".js-small-img-item", ".js-samll-img-wrap");
        BigImg.closeBigImg();
    });

tips: 依赖于swiper插件，请自行引入

效果图见下：