如何不使用第三方库仅通过JS和HTML构建多商品展示产品轮播滑块

1. 调整HTML结构 #

新增外层容器和滑动轨道，替代原有单元素显隐的结构逻辑：

<div class="carousel-container">
  <div class="carousel-track">
    <div class="box">商品1</div>
    <div class="box">商品2</div>
    <div class="box">商品3</div>
    <div class="box">商品4</div>
    <div class="box">商品5</div>
    <!-- 更多商品项按需添加 -->
  </div>
  <button id="prev">上一个</button>
  <button id="next">下一个</button>
</div>

2. 新增CSS样式 #

通过可视区域裁剪、轨道平移实现多商品展示和平滑切换效果，以下配置默认同时展示4个商品，可自行调整参数：

.carousel-container {
  position: relative;
  width: 1200px; /* 可视区域宽度可按需求改为百分比实现自适应 */
  overflow: hidden;
  margin: 0 auto;
}
.carousel-track {
  display: flex;
  transition: transform 0.3s ease; /* 控制滑动动画的过渡效果 */
}
.box {
  flex-shrink: 0;
  width: 25%; /* 展示4个商品时每个占25%宽度，展示3个可改为33.33% */
  box-sizing: border-box;
  padding: 0 10px;
}
#prev, #next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
}
#prev { left: 10px; }
#next { right: 10px; }

3. 优化JS逻辑 #

废弃原有单元素显隐逻辑，改为轨道平移实现，同时新增滑动边界判断、自动轮播、悬停暂停功能：

let carouselPosition = 0;
const VISIBLE_COUNT = 4; // 同时展示的商品数量，可自行改为3
const carousels = document.getElementsByClassName('box');
const totalCarousel = carousels.length;
const track = document.querySelector('.carousel-track');
const itemWidth = carousels[0].offsetWidth;
let autoPlayTimer = null;

// 绑定按钮切换事件
document.getElementById('next').addEventListener("click", function () {
  moveToNextCarousel();
  resetAutoPlay(); // 手动切换后重置自动轮播计时，避免刚切完就自动跳转
});
document.getElementById('prev').addEventListener("click", function () {
  moveToPrevCarousel();
  resetAutoPlay();
});

// 更新轮播位置
function updateSlidePosition() {
  track.style.transform = `translateX(-${carouselPosition * itemWidth}px)`;
}

// 下切逻辑，每次切换1个商品
function moveToNextCarousel() {
  // 边界判断：滑到最后一个可展示位置后回到开头
  if (carouselPosition >= totalCarousel - VISIBLE_COUNT) {
    carouselPosition = 0;
  } else {
    carouselPosition++;
  }
  updateSlidePosition();
}

// 上切逻辑，每次切换1个商品
function moveToPrevCarousel() {
  // 边界判断：滑到最开头后回到最后一个可展示位置
  if (carouselPosition <= 0) {
    carouselPosition = totalCarousel - VISIBLE_COUNT;
  } else {
    carouselPosition--;
  }
  updateSlidePosition();
}

// 启动自动轮播
function startAutoPlay() {
  autoPlayTimer = setInterval(moveToNextCarousel, 3000); // 3秒切换一次，可自行调整间隔时长
}

// 重置自动轮播计时
function resetAutoPlay() {
  clearInterval(autoPlayTimer);
  startAutoPlay();
}

// 鼠标悬停暂停轮播，移开后继续
document.querySelector('.carousel-container').addEventListener('mouseenter', () => {
  clearInterval(autoPlayTimer);
});
document.querySelector('.carousel-container').addEventListener('mouseleave', () => {
  startAutoPlay();
});

// 页面加载完成后启动自动轮播
window.addEventListener('load', startAutoPlay);

可选扩展：移动端触摸滑动支持 #

添加以下代码即可实现移动端手势滑动切换效果：

let touchStartX = 0;
let touchEndX = 0;

track.addEventListener('touchstart', (e) => {
  touchStartX = e.changedTouches[0].screenX;
});
track.addEventListener('touchend', (e) => {
  touchEndX = e.changedTouches[0].screenX;
  handleSwipe();
});

function handleSwipe() {
  const swipeDistance = touchEndX - touchStartX;
  // 滑动距离超过50px触发切换，阈值可自行调整
  if (swipeDistance > 50) {
    moveToPrevCarousel();
    resetAutoPlay();
  } else if (swipeDistance < -50) {
    moveToNextCarousel();
    resetAutoPlay();
  }
}

内容的提问来源于stack exchange，提问作者Mehdi Gh