JS仿淘宝商品主图切换

你可以使用以下代码实现仿淘宝商品主图的切换效果：

HTML 代码：

<div class="main-pic">
  <img class="active" src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>
<ul class="thumb">
  <li><img src="thumb1.jpg"></li>
  <li><img src="thumb2.jpg"></li>
  <li><img src="thumb3.jpg"></li>
</ul>

CSS 代码：

.main-pic {
  position: relative;
  width: 500px;
  height: 500px;
}
.main-pic img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
.main-pic .active {
  opacity: 1;
}
.thumb {
  margin-top: 10px;
  list-style: none;
}
.thumb li {
  display: inline-block;
  margin-right: 10px;
}
.thumb img {
  width: 100px;
  height: 100px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.5s ease-out;
}
.thumb img:hover {
  opacity: 1;
}
.thumb .active img {
  opacity: 1;
}

JS 代码：

const mainPic = document.querySelector('.main-pic');
const mainPicImgs = mainPic.querySelectorAll('img');
const thumb = document.querySelector('.thumb');
const thumbImgs = thumb.querySelectorAll('img');

thumbImgs.forEach((thumbImg, index) => {
  thumbImg.addEventListener('click', () => {
    mainPicImgs.forEach(mainPicImg => {
      mainPicImg.classList.remove('active');
    });
    mainPicImgs[index].classList.add('active');
    thumbImgs.forEach(thumbImg => {
      thumbImg.parentNode.classList.remove('active');
    });
    thumbImg.parentNode.classList.add('active');
  });
});

通过以上代码，你可以实现一个类似淘宝商品主图切换的效果。当你点击缩略图时，对应的大图会显示在主图区域，并将其对应的缩略图高亮显示。