js实现产品页点击小图在大图区显示

企业网站产品图片可能会比较多，需要在产品页面多放几张展示图片，我们可以使用一张大图+几张小图的形式排列，并使用js代码实现点击小图显示大图。效果如下所示


html代码部分：
<div class="img_bd">
    <img src="/e/picture/180613/1-1P6130ZH6.jpg" alt=' ' class="img-responsive center-block" id="pic" curindex="0"/>
</div>
<div class="img_hd">
    <div class="tempWrap" style="overflow: hidden; position: relative;">
        <ul style="left: 0px; position: relative; overflow: hidden; padding: 0px; margin: 0px;">
            <li style="float: left;"><img src="/e/picture/180613/1-1P6130ZH6.jpg" data-large="/e/picture/180613/1-1P6130ZH6.jpg" alt=''/></li>
            <li style="float: left;"><img src="/e/picture/180613/1-1P6130ZH6-50.jpg" data-large="/e/picture/180613/1-1P6130ZH6-50.jpg" alt=''/></li>
            <li style="float: left;"><img src="/e/picture/180613/1-1P6130ZH6-51.jpg" data-large="/e/picture/180613/1-1P6130ZH6-51.jpg" alt=''/></li>
            <li style="float: left;"><img src="/e/picture/180613/1-1P6130ZH6-52.jpg" data-large="/e/picture/180613/1-1P6130ZH6-52.jpg" alt=''/></li>
        </ul>
    </div>
</div>

js代码部分：
$(document).ready(function () {
var firstpic = $(".tempWrap ul li").first().find("img");
var firstsrc = firstpic.attr("data-large");
$("#pic").attr("src", firstsrc);
$(".tempWrap ul li").first().addClass("on");
$(".tempWrap img").click(function () {
    $(this).parent().addClass("on").siblings().removeClass("on");
    var imgSrc = $(this).attr("data-large");
    $("#pic").attr("src", imgSrc);
    var currentindex = $(this).parent().index();
    $("#pic").attr("curindex", currentindex);
})
$("#preArrow_B").click(function () {
    preclick()
});
$("#nextArrow_B").click(function () {
    nextclick()
});
});

css代码部分：
.img_bd { width:100%;  height: 220px; overflow: hidden;text-align: center;  position: relative; z-index: 1;}
.img_hd { height: auto;  position: relative; margin-top:15px;overflow: hidden;}
.img_hd  .picmidleft {  float: left;  width: 24px; overflow: hidden;}
.img_hd  .picmidright { float: left; width: 24px;  overflow: hidden;}
.img_hd .picmidleft a ,.img_hd .picmidright a{ background:#fff;color:#1a87d6;display: block; width: 24px; height: 55px; border: 1px solid #cfe2f0; line-height: 55px; font-size: 30px; text-align: center; margin-top:auto;}
.img_hd .picmidleft a:hover ,.img_hd .picmidright a:hover{background:#E3E3E3}
.img_hd .tempWrap{float: left; width: 330px;  overflow: hidden; padding-left: 0px;}
.img_hd  .tempWrap ul { width: 100%; overflow: hidden; position: relative;  margin: 0;}
.img_hd .tempWrap ul li{float: left;margin-top: 1px; display: inline; width: 23%; height: 55px; border: 1px solid #e4eff6;  overflow: hidden; text-align: center; vertical-align: middle;}
.img_hd .tempWrap ul li + li{ margin-left:2%; }
.img_hd .tempWrap ul li img{ width:100%; height:auto;}
.img_hd .tempWrap ul li.on { border: 3px solid #0f6eb5; margin-top: 0px;}
大家也可以根据自己的需求进行调整。