实现方式：借助插件：jquery.SuperSlide.2.1.3.js
在使用之前需要先引入jquery然后再引入第三方插件！！！！
点击缩略图显示的大图需要借助插件的一个属性：：defaultIndex
image.png
从你点击图片开始，左右滑动
Html代码：
//此处是大图预览的盒子 ，切换图片也在此处实现功能
css部分代码：
image.png
/*移动端商品详情页的小图放大功能实现*/
.hd-drop-mask,.imgPreview-mask{
position: fixed;
width:100%;
height: 100%;
z-index: 1009;
display:none;
top: 0;
left: 0;
}
.hd-drop-mask.active{
display:block;
}
.imgPreview-mask.active{
display: block;
background-color: black;
}
.closeImg {
position: absolute;
width: 1.5rem;
height: 1.5rem;
background-color: rgba(255,255,255,0.3);
left: .6rem;
top: .7rem;
border-radius: 50%;
}
.closeImg img{
width: 1rem;
height: 1rem;
}
.closeImg img,#bigImgPreview {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
left: 0;
right: 0;
}
#bigImgPreview img,#bigImgPreview{
width: 15rem;
height: 15rem;
}
#bigImgPreview ul li{
width: 15rem!important;
}
js部分代码：
image.png
// 获取所有的商品详情轮播图片
let imgArray = Array.from($("#banner_box ul li img"));
for(let i = 0; i < imgArray.length; i++){
$("#bigImgPreview .bd ul").append("
\n" +
" \n" +
"
");
imgArray[i].addEventListener("click", function(){
$(".imgPreview-mask").addClass("active");
//显示大图遮罩层出来
TouchSlide({
slideCell:"#bigImgPreview",
titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
mainCell:".bd ul",
effect:"leftLoop",
autoPage:true,//自动分页
autoPlay:true, //自动播放
delayTime:750,
defaultIndex:i,
});
// $(".bigImgShow").attr("src",originImgSrc);
},false);
}
$(".imgPreview-mask").click(function (){
$(".imgPreview-mask").removeClass("active");
});
$(".closeImg").click(function (){
$(".imgPreview-mask").removeClass("active");
})
如果觉得《html点击图片后图片移动 移动端点击图片放大图片 可左右切换图片》对你有帮助，请点赞、收藏，并留下你的观点哦！
