求助：基于HTML CSS JavaScript实现团队成员轮播组件

核心实现思路 #

基于HTML+CSS+原生JS实现，通过控制轮播轨道的transform属性实现平滑滑动，配合CSS过渡动画提升体验，同时加入左右切换按钮实现手动控制。

HTML结构 #

<div class="team-carousel">
  <!-- 轮播控制按钮 -->
  <button class="carousel-btn prev-btn">&lt;</button>
  <button class="carousel-btn next-btn">&gt;</button>
  
  <!-- 轮播容器 -->
  <div class="carousel-container">
    <div class="carousel-track">
      <!-- 团队成员卡片 -->
      <div class="member-card">
        <img src="member-1.jpg" alt="团队成员1">
        <h3>张三</h3>
        <p>前端开发工程师</p>
      </div>
      <div class="member-card">
        <img src="member-2.jpg" alt="团队成员2">
        <h3>李四</h3>
        <p>UI/UX设计师</p>
      </div>
      <div class="member-card">
        <img src="member-3.jpg" alt="团队成员3">
        <h3>王五</h3>
        <p>后端开发工程师</p>
      </div>
      <div class="member-card">
        <img src="member-4.jpg" alt="团队成员4">
        <h3>赵六</h3>
        <p>产品经理</p>
      </div>
      <div class="member-card">
        <img src="member-5.jpg" alt="团队成员5">
        <h3>孙七</h3>
        <p>测试工程师</p>
      </div>
    </div>
  </div>
</div>

CSS样式 #

/* 轮播整体容器 */
.team-carousel {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

/* 控制按钮 */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.5);
  color: white;
  font-size: 18px;
  cursor: pointer;
  z-index: 10;
}
.prev-btn { left: 10px; }
.next-btn { right: 10px; }
.carousel-btn:hover { background-color: rgba(0,0,0,0.7); }

/* 轮播轨道容器 */
.carousel-container {
  overflow: hidden;
}

/* 轮播轨道 */
.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

/* 成员卡片 */
.member-card {
  flex: 0 0 25%; /* 一行显示4张，可根据需求调整 */
  padding: 15px;
  box-sizing: border-box;
  text-align: center;
}
.member-card img {
  width: 100%;
  border-radius: 50%;
  margin-bottom: 10px;
}
.member-card h3 {
  margin: 0 0 5px;
  font-size: 18px;
}
.member-card p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

JavaScript逻辑 #

const carouselTrack = document.querySelector('.carousel-track');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
let cardWidth = document.querySelector('.member-card').offsetWidth;
let currentPosition = 0;
const totalCards = document.querySelectorAll('.member-card').length;
const visibleCards = Math.floor(document.querySelector('.carousel-container').offsetWidth / cardWidth);

// 下一张按钮逻辑
nextBtn.addEventListener('click', () => {
  if (currentPosition > -(totalCards - visibleCards) * cardWidth) {
    currentPosition -= cardWidth;
    carouselTrack.style.transform = `translateX(${currentPosition}px)`;
  }
});

// 上一张按钮逻辑
prevBtn.addEventListener('click', () => {
  if (currentPosition < 0) {
    currentPosition += cardWidth;
    carouselTrack.style.transform = `translateX(${currentPosition}px)`;
  }
});

// 窗口大小变化时重新计算卡片宽度
window.addEventListener('resize', () => {
  const newCardWidth = document.querySelector('.member-card').offsetWidth;
  const ratio = newCardWidth / cardWidth;
  currentPosition *= ratio;
  carouselTrack.style.transform = `translateX(${currentPosition}px)`;
  cardWidth = newCardWidth;
});

关键调整点 #

• 修改一行显示卡片数量：调整.member-card的flex: 0 0 X%，比如一行3张设为33.33%
• 开启自动轮播：添加setInterval定时调用nextBtn.click()即可
• 自定义样式：可根据需求修改头像大小、文字样式、按钮外观等

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