如何实现带定时功能的垂直滚动画廊轮播？

核心实现思路 #

1. 给每个轮播容器设置固定高度并隐藏溢出内容，内部用一个内容容器包裹所有轮播项，通过修改内容容器的垂直偏移量实现滚动效果
2. 用定时器实现自动滚动，针对三个轮播分别配置不同的滚动方向和速度
3. 滚动到边界时重置内容容器位置，实现循环滚动，避免内容溢出

代码示例 #

HTML 结构

<div class="carousel-container" id="carousel1">
  <div class="carousel-content">
    <div class="carousel-item">轮播项1-1</div>
    <div class="carousel-item">轮播项1-2</div>
    <div class="carousel-item">轮播项1-3</div>
    <div class="carousel-item">轮播项1-4</div>
  </div>
</div>

<div class="carousel-container" id="carousel2">
  <div class="carousel-content">
    <div class="carousel-item">轮播项2-1</div>
    <div class="carousel-item">轮播项2-2</div>
    <div class="carousel-item">轮播项2-3</div>
    <div class="carousel-item">轮播项2-4</div>
  </div>
</div>

<div class="carousel-container" id="carousel3">
  <div class="carousel-content">
    <div class="carousel-item">轮播项3-1</div>
    <div class="carousel-item">轮播项3-2</div>
    <div class="carousel-item">轮播项3-3</div>
    <div class="carousel-item">轮播项3-4</div>
  </div>
</div>

CSS 样式

.carousel-container {
  width: 200px;
  height: 150px;
  border: 1px solid #ccc;
  overflow: hidden;
  margin: 20px;
  float: left;
}

.carousel-content {
  transition: transform 0.3s ease; /* 平滑滚动过渡 */
}

.carousel-item {
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

JavaScript 逻辑

// 轮播配置：容器ID、滚动方向（down/up）、滚动速度（数值越小速度越快）
const carouselConfigs = [
  { id: 'carousel1', direction: 'down', speed: 20 },
  { id: 'carousel2', direction: 'up', speed: 30 },
  { id: 'carousel3', direction: 'down', speed: 15 }
];

carouselConfigs.forEach(config => {
  const container = document.getElementById(config.id);
  const content = container.querySelector('.carousel-content');
  const itemHeight = container.querySelector('.carousel-item').offsetHeight;
  const totalItems = content.children.length;
  const maxOffset = (totalItems - 1) * itemHeight; // 最大滚动偏移量
  let currentOffset = 0;

  setInterval(() => {
    if (config.direction === 'down') {
      currentOffset += 1;
      // 滚动到底部时重置到顶部
      if (currentOffset > maxOffset) {
        currentOffset = 0;
      }
    } else {
      currentOffset -= 1;
      // 滚动到顶部时重置到底部
      if (currentOffset < 0) {
        currentOffset = maxOffset;
      }
    }
    content.style.transform = `translateY(-${currentOffset}px)`;
  }, config.speed);
});

关键细节说明 #

• 速度控制：speed参数是定时器的间隔毫秒数，数值越小滚动速度越快，可根据需求调整三个轮播的数值
• 方向控制：向下滚动时增加偏移量，向上滚动时减少偏移量，通过translateY的负值实现内容向上移动（视觉上向下滚动）
• 边界处理：计算出最大偏移量（即所有轮播项滚动完的位置），当到达边界时重置偏移量，实现无限循环滚动
• 平滑滚动：CSS的transition属性让滚动过程更流畅，如果不需要可以移除

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