仿朋友圈图片查看功能

准备

#imglist img{
width: 20%;
height: 70px;
float: left
}
.swiper-container{
position: fixed;
top: 0px;
left: 0px;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 99;
width: 100%;
height: 100%;
display: none
}

<!-- 引入上述准备的相关文件-->
<!-- 缩略图 -->
<div id="imglist">
<!-- 此处是动态数据 -->
</div>
<!--此处轮播图-->
<div>
<div class="swiper-wrapper" style="">
<!-- 此处是动态数据 -->
</div>
<div class="swiper-pagination"></div>
</div>

//img为图片数组
var img=['1.jpg','2.jpg','3.jpg']
for(var i=0; i<img.length;i++){
var str=' <img class="pimg" src='+img[i]+' onclick="change('+i+')"/>'
$("imglist").append(str); //缩略图
var str1='<div class="swiper-slide"><img src='+img[i]+'
a7fc
alt=""></div>';
$(".swiper-wrapper").append(str1) //图片展示
name(i);
}
//对图片进行缩放调整
function name(i){
$(".swiper-container .swiper-slide").eq(i).find('img').attr("src", img[i]).load(function(){
var windowW = $(window).width();
var windowH = $(window).height();
var realWidth = this.width;
var realHeight = this.height;
var scale = 1;
var scaleW = 1;
var scaleH = 1;
var x=0;
var y=0;
if(realWidth>windowW ||realHeight>windowH){
scaleW = windowW/realWidth;
scaleH = windowH/realHeight;
//计算一个缩放比例
scale = Math.min(scaleW,scaleH);
}
realWidth *= scale;
realHeight *= scale;
x = (windowW - realWidth)/2;
y = (windowH - realHeight)/2;
$(".swiper-container .swiper-slide").eq(i).find('img').css("width",realWidth);
var w = (windowW-realWidth)/2;
var h = (windowH-realHeight)/2;
$(".swiper-container .swiper-slide").eq(i).css({"top":h, "left":w});
});
}
$(".swiper-container").click(function(){
$(".swiper-container").hide()
})
Swiper1 = new Swiper ('.swiper-container', {
preventLinksPropagation : false, //拖动时阻止click事件
pagination: '.swiper-pagination', //下方圆点
slidesPerView: 1, //容器同时显示slides的数量
paginationClickable: true, //分页指示点可切换图片
observer: true, //图片删除修改时，自动初始化swiper
speed: 500,
autoplayDisableOnInteraction: false, //用户操作后重启autoplay
});
function change(index){ //点击缩略图展示相关图片
$(".swiper-container").show()
Swiper1.slideTo(index,100,false);
}

效果如下