001-封裝一個圖片檢視器
阿新 • • 發佈:2018-12-03
#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> < </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外掛,請自行引入
效果圖見下: