实现方式：借助插件：jquery.SuperSlide.2.1.3.js
在使用之前需要先引入jquery然后再引入第三方插件！！！！
点击缩略图显示的大图需要借助插件的一个属性：：defaultIndex

image.png

从你点击图片开始，左右滑动

Html代码：

//此处是大图预览的盒子 ，切换图片也在此处实现功能
 <div class="imgPreview-mask">
            <div class="closeImg"><img src="{$APP_ROOT}/wap/Tpl/main/images/closeImg.png"/> </div>
            <div id="bigImgPreview">
                <!--                <img class="bigImgShow" src=""/>-->
                <div class="bd">
                    <ul >
                        <!--<li style="vertical-align: top; width: 15rem; display: table-cell;height:15rem">
                            <img class="imgItem" src="http://test.unebuy.com/public/attachment/202102/22/14/6033555cac0bc_400x400.jpg" />
                        </li>-->
                    </ul>
                </div>
                <div class="hd"><ul></ul></div>
            </div>
        </div>

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("<li style=\"vertical-align: top; width: 15rem; display: table-cell;height:15rem\">\n" +
            "                            <img class=\"imgItem\" src='"+$(imgArray[i]).attr("src")+"' />\n" +
            "                        </li>");

        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");
    })