我们在建站的时候，为了更好的用户体验，会给产品增加一个图集展示的效果，当然这种图集展示的效果有很多，自动轮播的也有，手动点选的方式也有，下面我就来分享一个手动点选切换的图集html和js源码，代码很简单，如下：

1.html.js.css代码

<div class="pro_detail_left">
  <div class="jqzoom">
    <img class="fs" id="bigImg" src="/images/1.png"
    alt="">
  </div>
  <ul class="imgList">
    <li style="background:url(/images/1.png) center center /cover;"
    src="/images/1.png" class="">
    </li>
    <li style="background:url(/images/2.png) center center /cover;"
    src="/images/2.png" class="">
    </li>
    <li style="background:url(/images/3.png) center center /cover;"
    src="/images/3.png" class="">
    </li>
    <li style="background:url(/images/4.png) center center /cover;"
    src="/images/4.png" class="onn">
    </li>
  </ul>
</div>
<script>
  var img = document.querySelectorAll(".imgList li"),
  box = document.querySelectorAll(".jqzoom img")[0];
  img[0].classList.add("onn");
  for (let i = 0; i < img.length; i++) {
      img[i].onclick = function(){
          let imgsrc = img[i].getAttribute("src");
          for (let t = 0; t < img.length; t++) {
              img[t].classList.remove("onn")
          }
          img[i].classList.add("onn");
          box.setAttribute("src", img[i].getAttribute("src"))
      }
  }
</script>
<style>
.pro_show_up_l{ width:440px; float:left;}
.pro_detail_left {float:left; overflow:hidden; margin-right:20px;}
.pro_detail_left .jqzoom {
    border: 1px solid #e2e2e2;
    float: left;
    position: relative;
    padding: 0px;
    cursor: pointer;
    height: 420px;
    width: 420px;
    background: #f2f2f2;
    overflow: hidden;
}
.pro_detail_left .fs {
    width: 100%;
    height: auto;
    line-height: 420px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.pro_detail_left ul.imgList {
    float: left;
    margin-top: 10px;
    white-space: nowrap;
    overflow-x: scroll;
    height: 110px;
    width: 422px;
}
.pro_detail_left ul.imgList li {
    height: 83px;
    position: relative;
    width: 83px;
    border: solid 1px #e2e2e2;
    display: inline-block;
  overflow: hidden;
  margin-right: 5px;
  cursor: pointer;
}
.pro_detail_left ul.imgList li img {
    width: 82px;
    height: auto;
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    overflow: hidden;
}
.pro_detail_left ul.imgList li img:hover { background:#eee; }
.pro_detail_left ul.imgList li.onn {
border: solid 1px #ff2c4c;
}
.pro_detail_left .zoomdiv{ background:#fff;}
.pro_detail_left .zoomdiv img{ display:inline-block; vertical-align:top;}
</style>

2.预览效果

下面是测试的效果，自己可以修改

3.第二种html代码

上面的代码是以背景图的方式展示出来，当然也可以直接以图片的形式展示出来，<li><img src=""></li>如下：

<div class="pro_detail_left">
  <div class="jqzoom">
    <img class="fs" id="bigImg" src="/images/1.png"
    alt="">
  </div>
  <ul class="imgList">
    <li class="onn"><img src="/images/1.png"></li>
    <li class=""><img src="/images/2.png"></li>
    <li class=""><img src="/images/3.png"></li>
    <li class=""><img src="/images/4.png"></li>
  </ul>
</div>
<script>
  var img = document.querySelectorAll(".imgList li"),
  box = document.querySelectorAll(".jqzoom img")[0];
  img[0].classList.add("onn");
  for (let i = 0; i < img.length; i++) {
      img[i].onclick = function(){
          let imgsrc = img[i].getAttribute("src");
          for (let t = 0; t < img.length; t++) {
              img[t].classList.remove("onn")
          }
          img[i].classList.add("onn");
          box.setAttribute("src", img[i].getAttribute("src"))
      }
  }
</script>
<style>
.pro_show_up_l{ width:440px; float:left;}
.pro_detail_left {float:left; overflow:hidden; margin-right:20px;}
.pro_detail_left .jqzoom {
    border: 1px solid #e2e2e2;
    float: left;
    position: relative;
    padding: 0px;
    cursor: pointer;
    height: 420px;
    width: 420px;
    background: #f2f2f2;
    overflow: hidden;
}
.pro_detail_left .fs {
    width: 100%;
    height: auto;
    line-height: 420px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.pro_detail_left ul.imgList {
    float: left;
    margin-top: 10px;
    white-space: nowrap;
    overflow-x: scroll;
    height: 110px;
    width: 422px;
}
.pro_detail_left ul.imgList li {
    height: 83px;
    position: relative;
    width: 83px;
    border: solid 1px #e2e2e2;
    display: inline-block;
  overflow: hidden;
  margin-right: 5px;
  cursor: pointer;
}
.pro_detail_left ul.imgList li img {
    width: 82px;
    height: auto;
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    overflow: hidden;
}
.pro_detail_left ul.imgList li img:hover { background:#eee; }
.pro_detail_left ul.imgList li.onn {
    border: solid 1px #ff2c4c;
}
.pro_detail_left .zoomdiv{ background:#fff;}
.pro_detail_left .zoomdiv img{ display:inline-block; vertical-align:top;}
</style>

下面是测试的效果，自己可以修改