#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插件,请自行引入
效果图见下: