京东商品图片换片用js如何做

在京东的商品图片轮播或者切换通常会用到JavaScript库如Swiper.js、jQuery Cycle插件或者是原生的HTML5 `<img>`标签结合`<a>`标签和`data-src`属性。以下是基本步骤：

1. **HTML结构**:

<div class="carousel">
  <div class="slide">
    <a href="#" data-src="image1.jpg" class="hidden">
      <img src="placeholder.jpg" alt="商品图片1" />
    </a>
    <a href="#" data-src="image2.jpg" class="hidden">
      <img src="placeholder.jpg" alt="商品图片2" />
    </a>
    <!-- 添加更多图片 -->
  </div>
</div>

2. **CSS**:
隐藏初始图片并准备显示其他图片的位置：

.hidden {
  display: none;
}

3. **JavaScript (使用Swiper.js为例)**:

<script src="swiper.min.js"></script>
<script>
var swiper = new Swiper('.carousel', {
  loop: true,
  slidesPerView: 1,
  onSlideChangeStart: function() {
    this.previousSlide.find('img').removeClass('active');
    this.activeIndex === 0 ? this.slides.eq(-1).find('img').addClass('active') :
    this.slides.eq(this.activeIndex - 1).find('img').addClass('active');
  },
});
</script>

这里我们监听滑动开始事件，在每个开始改变时，移除前一张图片的激活状态，并添加新选中图片的激活状态。

4. **更换图片源**:
当需要实际展示时，通过点击或者其他触发事件替换`src`属性即可。