纯CSS滚动公告栏无缝循环实现及jQuery优化方案咨询

当然可以用jQuery搞定这个无缝循环的需求！纯CSS版的滚动公告栏之所以会在一轮结束后停顿再重新开始，是因为CSS动画跑完后会瞬间跳回初始位置，而jQuery可以通过动态调整DOM结构和滚动位置，完美实现无间隙的循环效果。

实现思路 #

核心逻辑很简单：

• 克隆第一个公告项并添加到列表末尾，这样当滚动到原最后一项时，后面跟着的是和第一项完全一样的内容，视觉上不会出现断层
• 通过定时器控制列表的滚动位移，当第一个项完全滚出视野时，把它移到列表末尾，同时重置滚动位置，让滚动持续进行

完整代码示例 #

HTML结构

<div class="ticker-container">
  <ul class="ticker-list">
    <li class="ticker-item">公告1：欢迎访问本站</li>
    <li class="ticker-item">公告2：最新活动即将开始</li>
    <li class="ticker-item">公告3：会员专享福利来袭</li>
    <li class="ticker-item">公告4：积分兑换通道已开启</li>
  </ul>
</div>

CSS样式

* { box-sizing: border-box; }

.ticker-container {
  width: 100%;
  overflow: hidden;
  background: #f5f5f5;
  border: 1px solid #ddd;
}

.ticker-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  /* 禁用原CSS动画，改用jQuery控制滚动 */
  animation: none;
}

.ticker-item {
  white-space: nowrap;
  padding: 10px 20px;
  min-width: 100%; /* 确保每个项占满容器宽度 */
  text-align: center;
}

jQuery逻辑

$(document).ready(function() {
  const $tickerList = $('.ticker-list');
  const $tickerItems = $('.ticker-item');
  const singleItemWidth = $tickerItems.first().outerWidth();
  let currentScroll = 0;
  const scrollSpeed = 2; // 数值越小滚动越慢，可自行调整
  let tickerTimer;

  // 克隆第一个公告项，追加到列表末尾，铺垫无缝效果
  $tickerList.append($tickerItems.first().clone());

  // 启动滚动的核心函数
  function startScroll() {
    tickerTimer = setInterval(() => {
      currentScroll += scrollSpeed;
      $tickerList.css('transform', `translateX(-${currentScroll}px)`);

      // 当第一个项完全滚出容器时
      if (currentScroll >= singleItemWidth) {
        // 把第一个项移到列表最后
        $tickerList.append($tickerList.find('.ticker-item').first());
        // 重置滚动位置，抵消一个项的宽度，实现无缝衔接
        currentScroll -= singleItemWidth;
        $tickerList.css('transform', `translateX(-${currentScroll}px)`);
      }
    }, 20);
  }

  // 鼠标悬停暂停滚动，提升用户体验
  $('.ticker-container').hover(
    () => clearInterval(tickerTimer),
    () => startScroll()
  );

  // 页面加载完成后启动滚动
  startScroll();
});

关键细节说明 #

• 我们给每个公告项设置了min-width: 100%，确保每个项都占满容器宽度，滚动时是整项切换的效果；如果需要横向滚动多个项，只需要把这个属性改成合适的宽度即可
• scrollSpeed变量可以调整滚动的快慢，数值越大滚动越快
• 鼠标悬停暂停的功能是可选的，如果不需要可以直接删掉hover监听部分

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