效果
先看效果图，再讲解，遇到这个需求，感觉还挺有意思的，记录下来
思路
我的思路是这样，有六张或者九张图片，肯定是有很多个朋友发朋友圈的，每一个朋友是一个数组，而他发多少张图片又是一个数组，所以是可以循环的。这里我把朋友数组命名为 arr1，图片数组命名为arr2
这样的话，我在预览的时候，我就点击其中一个朋友的的图片进行预览，就个给图片加上点击事件，传两个参数，一个是this，一个是索引，这样我就可以准确的知道，我点击的是哪个朋友的图片，以及是哪张图片。
当我知道这两个东西后，就很容易去实现上面的效果了，刚开始的时候，我是想着把整个arr2做为参数传递过去的，但是后端返回的数据，这个arr2数组里面不止有图片路径还有很多其他的参数，所以我在传的时候一直在报语法错误，
后面想到一个办法，就是在这个图片单独的父容器储存起来，用的时候再取就好了，这样我就可以在点击的时候，获取到arr2里面所有的图片路径了，
然后再应用swiper轮播图插件，把获取的图片用一个轮播图存起来，进行循环，这个就实现了，上面的效果，
第一步
点击图片获取对应列表下面的所有图片，我的实现方案是这样的： 我把对应的src放到img图片容器的父级div上面，用data-img存下来
<div class="template-list" data-img="./image/pro1.webp">
<div class='imagebox'>
<img src="./image/pro1.webp" onclick="imgShow(this,0)" class="template-img"
alt="FREE SHIPPING" width="70" height="70">
</div>
</div>
然后循环，这样就可以获取到整个容器下面的src了
下面是获取data-img的js
var templatelist = ""
templatelist = $(that).parents(".sum-give").find(".template-list");
var imagroe = [];
for (let i = 0; i < templatelist.length; i++) {
imagroe.push(templatelist.eq(i).attr("data-img"))
}
第二步
就是你点击的时候，需要创建一个容器来储存这个图片轮播图。
设置点击事件也就是onclick="imgShow(this,0)"，带入索引的目的，后面再说，这个索引很关键。
点击的时候，在body里面创建一个容器，代码如下：
var templatelist = ""
templatelist = $(that).parents(".sum-give").find(".template-list");
var imagroe = [];
for (let i = 0; i < templatelist.length; i++) {
imagroe.push(templatelist.eq(i).attr("data-img"))
}
var html = ""
html += "<div id='back-curtain' onclick='backcurtain()' style='position:fixed;top:0;left:0;background:rgba(0,0,0,1);z-index:998;width:100%;display:none;'>";
html += "<div id='imgDiv' style='position:absolute;'>";
html += "<div class='swiper curtain-mySwiper'>";
html += "<div class='swiper-wrapper'>";
for (let i = 0; i < imagroe.length; i++) {
html += "<div class='swiper-slide'>";
html += "<img class='bigImg' src='' />";
html += "</div>";
}
html += "</div>";
html += "<div class='swiper-pagination'></div>";
html += "</div>";
html += "</div>";
html += "</div>";
$("body").append(html)
这里需要注意一下，要引入两个js一个jquery.js,一个swiper.js,还有一个swiper.css,这些对应的官网都是可以下载的。 把这个空的容器添加好以后，就要放图片进去了，用jq的attr方法，代码如下：
for (let i = 0; i < imagroe.length; i++) {
$(".bigImg").eq(i).attr("src", imagroe[i]);
}
到这里基本上就已经实现了，上面的效果
重点，之前说的那个索引，我在看朋友圈的时候，有发现，你预览图片的时候，你点击的是哪一张，就会预览哪一张，然后下面的小圆点也会是在那一张的那个索引下面，所以索引的作用来了，刚好又发现swiper有一个属性initialSlide，刚好是记录索引的，然后完美解决了这个问题，代码如下：
var swiper = new Swiper(".curtain-mySwiper", {
pagination: {
el: ".swiper-pagination",
},
initialSlide: newindex
});
第三步
不知道你们有没有发现，就是你发微信朋友圈的时候，不管你发的横图还是竖图，最后面展示出来的都是一样的大小，而不是这样，图片大小不一，这样很不好看
比如说这个：
我这里用的是放大，裁剪，给容器设置一个高度，然后超出隐藏，然后再用js来获取图片的高度来判断，图片具体是放大多少，
这里做了一下测试，就是一种很极端的情况下，也是可以的。如下图：
然后是放大，裁剪后的效果：
怎么样，是不是好看的很多
下面是完善的代码，
比如说，设置预览图片的样式，
$(".bigImg").css({ 'width': '100%', 'height': 'auto' });
// 图片位置
$("#imgDiv").css({ 'top': '50%', 'left': '50%', 'transform': 'translate(-50%,-50%)', 'width': '96%' });
// 图片淡入
$("#back-curtain").fadeIn("fast");
// 遮罩效果
$("#back-curtain").css({
'position': 'fixed',
'overflow-y': 'auto',
'width': '100%',
'height': '100%',
'z-index': '998'
}).show();
以及点击关闭这个模态框
//模态框点击事件
function backcurtain() {
$("#back-curtain").remove()
}
结语
以上就是本篇文章的全部内容，希望对大家的学习有所帮助，以上就是关于实现类似微信朋友圈，图片预览功能的详细介绍，如果有什么问题，也希望各位大佬们能提出宝贵的意见。
下面附上全部代码
<!DOCTYPE html>
<html lang="en">
<link>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-3.4.1.min.js"></script>
<script src="./swiper-bundle.min.js"></script>
<link rel="stylesheet" href="./swiper-bundle.min.css">
</head>
<style>
body,
ul,
li,
p {
margin: 0;
padding: 0;
}
.score-list {
padding: 0 12px;
}
.score-list li {
display: flex;
padding: 15px 0px;
justify-content: space-between;
border-bottom: 1px solid #DDDDDD;
}
.score-list .score-list-right {
width: 88%;
}
.score-list .score-name {
font-size: 20px;
color: #660099;
margin-bottom: 5px;
}
.score-list .score-intro {
font-size: 14px;
color: #333333;
margin: 5px 0px;
word-wrap: break-word;
}
.score-view-btn {
text-align: center;
width: 100%;
margin: 30px 0;
}
.score-view-all {
padding: 7px 35px;
background: #EFEFEF;
border-radius: 6px 6px 6px 6px;
font-size: 14px;
color: #333333;
margin: 60px auto 50px auto;
display: flex;
align-items: center;
justify-content: center;
}
.score-max {
border-bottom: 1px solid #DDDDDD;
padding-bottom: 20px;
}
.head-portrait {
width: 34px;
height: 34px;
background: #9664E5;
border-radius: 50%;
font-size: 14px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.sum-give {
display: flex;
justify-content: left;
flex-wrap: wrap;
}
/* 图片放大样式 */
.imgshowclose {
position: absolute;
font-size: 30px;
color: #fff;
right: -31px;
top: -14px;
border: 2px solid;
border-radius: 50%;
height: 33px;
width: 33px;
display: flex;
align-items: center;
justify-content: center;
}
.imgshowclose:hover {
cursor: pointer;
}
.template-list {
width: 32%;
margin-bottom: 5px;
margin-right: 1.2%;
}
.template-list .template-img {
width: 100%;
height: auto;
display: block;
}
.template-list .template-img:hover {
cursor: pointer;
}
.template-list figure {
position: relative;
}
.imagebox {
overflow: hidden;
height: 107px;
}
.score-list .sum-give {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: left;
}
.bigImg {
max-height: 745px;
}
.curtain-mySwiper .swiper-horizontal>.swiper-pagination-bullets,
.curtain-mySwiper .swiper-pagination-bullets.swiper-pagination-horizontal,
.curtain-mySwiper .swiper-pagination-custom,
.curtain-mySwiper .swiper-pagination-fraction {
bottom: -30px;
position: fixed;
}
.curtain-mySwiper .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.curtain-mySwiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
background-color: #ffffff;
}
.curtain-mySwiper .swiper-wrapper {
align-items: center;
}
</style>
<body>
<a href="mailto:newsletter@stellarcontours.com?&subject=Interested in your products&body=Hi MYCHWAY,\nThank you for your email.%0 I am interested in your beauty devices.%0Could you provide additional information? \nThank you!">example@phplamp.com</a>
<ul id="review" class="score-list">
<li>
<p class="head-portrait">p</p>
<div class="score-list-right">
<p class="score-name">测试文案测试文</p>
<p class="score-intro">测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案
测试文案测试文案测试文案测试文案测试文案</p>
<div class="sum-give" style="justify-content: left;">
<div class="template-list" data-img="./image/pro1.webp">
<div class='imagebox'>
<img src="./image/pro1.webp" onclick="imgShow(this,0)" class="template-img"
alt="FREE SHIPPING" width="70" height="70">
</div>
</div>
<div class="template-list" data-img="./image/pro2.webp">
<div class='imagebox'>
<img src="./image/pro2.webp" onclick="imgShow(this,1)" class="template-img"
alt="FREE SHIPPING" width="70" height="70">
</div>
</div>
<div class="template-list" data-img="./image/pro3.webp">
<div class='imagebox'>
<img src="./image/pro3.webp" onclick="imgShow(this,2)" class="template-img"
alt="FREE SHIPPING" width="70" height="70">
</div>
</div>
<div class="template-list" data-img="./image/pro4.webp">
<div class='imagebox'>
<img src="./image/pro4.webp" onclick="imgShow(this,3)" class="template-img"
alt="FREE SHIPPING" width="70" height="70">
</div>
</div>
<div class="template-list" data-img="./image/pro5.webp">
<div class='imagebox'>
<img src="./image/pro5.webp" onclick="imgShow(this,4)" class="template-img"
alt="FREE SHIPPING" width="70" height="70">
</div>
</div>
</div>
</div>
</li>
</ul>
<script>
$(function () {
setTimeout(() => {
var templatelist = ""
templatelist = $(".sum-give").find(".template-list")
var imghe = ""
for (let i = 0; i < templatelist.length; i++) {
imghe = templatelist.eq(i).find(".imagebox").find("img").height()
if (imghe < 20) {
templatelist.eq(i).find("img").css({ 'transform': 'scale(11.5)' })
} else if (imghe < 40) {
templatelist.eq(i).find("img").css({ 'transform': 'scale(7.5)' })
} else if (imghe < 60) {
templatelist.eq(i).find("img").css({ 'transform': 'scale(35.5)' })
} else if (imghe < 80) {
templatelist.eq(i).find("img").css({ 'transform': 'scale(2.5)' })
} else if (imghe < 107) {
templatelist.eq(i).find("img").css({ 'transform': 'scale(1.5)' })
}
}
}, 1000)
})
//图片放大
function imgShow(that, newindex) {
var templatelist = ""
templatelist = $(that).parents(".sum-give").find(".template-list");
var imagroe = [];
for (let i = 0; i < templatelist.length; i++) {
imagroe.push(templatelist.eq(i).attr("data-img"))
}
var html = ""
html += "<div id='back-curtain' onclick='backcurtain()' style='position:fixed;top:0;left:0;background:rgba(0,0,0,1);z-index:998;width:100%;display:none;'>";
html += "<div id='imgDiv' style='position:absolute;'>";
html += "<div class='swiper curtain-mySwiper'>";
html += "<div class='swiper-wrapper'>";
for (let i = 0; i < imagroe.length; i++) {
html += "<div class='swiper-slide'>";
html += "<img class='bigImg' src='' />";
html += "</div>";
}
html += "</div>";
html += "<div class='swiper-pagination'></div>";
html += "</div>";
html += "</div>";
html += "</div>";
$("body").append(html)
var swiper = new Swiper(".curtain-mySwiper", {
pagination: {
el: ".swiper-pagination",
},
initialSlide: newindex
});
for (let i = 0; i < imagroe.length; i++) {
$(".bigImg").eq(i).attr("src", imagroe[i]);
}
$(".bigImg").css({ 'width': '100%', 'height': 'auto' });
// 图片位置
$("#imgDiv").css({ 'top': '50%', 'left': '50%', 'transform': 'translate(-50%,-50%)', 'width': '96%' });
// 图片淡入
$("#back-curtain").fadeIn("fast");
// 遮罩效果
$("#back-curtain").css({
'position': 'fixed',
'overflow-y': 'auto',
'width': '100%',
'height': '100%',
'z-index': '998'
}).show();
}
//模态框点击事件
function backcurtain() {
//$("#back-curtain").hide();
$("#back-curtain").remove()
}
</script>
</body>
</html>
