从右到左的无限Marquee轮播滑块存在跳跃卡顿，求修复方案

卡顿根源 #

• 原方案用setInterval搭配jQuery animate，两者时间调度易产生间隙，出现跳跃感
• 动画结束后直接重置marginLeft并移动DOM元素，触发页面重排，造成视觉卡顿
• jQuery animate性能弱于原生CSS动画，无法充分利用GPU加速

优化方案（CSS动画+极简JS控制） #

1. 调整HTML结构：复制列表实现无缝衔接 #

复制一份原列表，让滚动到末尾时自然衔接，避免重置位置的跳跃：

<div class="marqueslide">
  <div class="marquee-container">
    <ul class="testimonial-cards marquestarthere">
      <li class="marqueme">
        <div class="card-item">
          <p class="comment">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus turpis, imperdiet ac dui at, elementum viverra metus. Vestibulum at interdum neque, sodales dapibus massa. Phasellus non faucibus nibh. Aliquam in varius mauris. Proin sodales nulla quam, eget pellentesque lorem imperdiet quis. Sed placerat nisi lectus, ut tempus ante euismod eget. Phasellus rhoncus, lacus et varius dapibus, purus enim cursus tortor, et mattis velit lectus nec erat. Duis ultrices posuere eros. Praesent ut risus eros. Proin at lacus feugiat mauris ultrices feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac sapien ac mi lacinia elementum. Nunc posuere odio condimentum mi fermentum, ac dapibus diam pharetra. Phasellus sed justo rutrum, bibendum ante porttitor, tempor orci. Morbi porttitor mi sed mi ullamcorper, sit amet ultrices magna volutpat.</p>
        </div>
      </li>
      <li class="marqueme">
        <div class="card-item">
          <p class="comment">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus turpis, imperdiet ac dui at, elementum viverra metus. Vestibulum at interdum neque, sodales dapibus massa. Phasellus non faucibus nibh. Aliquam in varius mauris. Proin sodales nulla quam, eget pellentesque lorem imperdiet quis. Sed placerat nisi lectus, ut tempus ante euismod eget. Phasellus rhoncus, lacus et varius dapibus, purus enim cursus tortor, et mattis velit lectus nec erat. Duis ultrices posuere eros. Praesent ut risus eros. Proin at lacus feugiat mauris ultrices feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac sapien ac mi lacinia elementum. Nunc posuere odio condimentum mi fermentum, ac dapibus diam pharetra. Phasellus sed justo rutrum, bibendum ante porttitor, tempor orci. Morbi porttitor mi sed mi ullamcorper, sit amet ultrices magna volutpat.</p>
        </div>
      </li>
      <li class="marqueme">
        <div class="card-item">
          <p class="comment">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus turpis, imperdiet ac dui at, elementum viverra metus. Vestibulum at interdum neque, sodales dapibus massa. Phasellus non faucibus nibh. Aliquam in varius mauris. Proin sodales nulla quam, eget pellentesque lorem imperdiet quis. Sed placerat nisi lectus, ut tempus ante euismod eget. Phasellus rhoncus, lacus et varius dapibus, purus enim cursus tortor, et mattis velit lectus nec erat. Duis ultrices posuere eros. Praesent ut risus eros. Proin at lacus feugiat mauris ultrices feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac sapien ac mi lacinia elementum. Nunc posuere odio condimentum mi fermentum, ac dapibus diam pharetra. Phasellus sed justo rutrum, bibendum ante porttitor, tempor orci. Morbi porttitor mi sed mi ullamcorper, sit amet ultrices magna volutpat.</p>
        </div>
      </li>
      <li class="marqueme">
        <div class="card-item">
          <p class="comment">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus turpis, imperdiet ac dui at, elementum viverra metus. Vestibulum at interdum neque, sodales dapibus massa. Phasellus non faucibus nibh. Aliquam in varius mauris. Proin sodales nulla quam, eget pellentesque lorem imperdiet quis. Sed placerat nisi lectus, ut tempus ante euismod eget. Phasellus rhoncus, lacus et varius dapibus, purus enim cursus tortor, et mattis velit lectus nec erat. Duis ultrices posuere eros. Praesent ut risus eros. Proin at lacus feugiat mauris ultrices feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac sapien ac mi lacinia elementum. Nunc posuere odio condimentum mi fermentum, ac dapibus diam pharetra. Phasellus sed justo rutrum, bibendum ante porttitor, tempor orci. Morbi porttitor mi sed mi ullamcorper, sit amet ultrices magna volutpat.</p>
        </div>
      </li>
      <li class="marqueme">
        <div class="card-item">
          <p class="comment">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus turpis, imperdiet ac dui at, elementum viverra metus. Vestibulum at interdum neque, sodales dapibus massa. Phasellus non faucibus nibh. Aliquam in varius mauris. Proin sodales nulla quam, eget pellentesque lorem imperdiet quis. Sed placerat nisi lectus, ut tempus ante euismod eget. Phasellus rhoncus, lacus et varius dapibus, purus enim cursus tortor, et mattis velit lectus nec erat. Duis ultrices posuere eros. Praesent ut risus eros. Proin at lacus feugiat mauris ultrices feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac sapien ac mi lacinia elementum. Nunc posuere odio condimentum mi fermentum, ac dapibus diam pharetra. Phasellus sed justo rutrum, bibendum ante porttitor, tempor orci. Morbi porttitor mi sed mi ullamcorper, sit amet ultrices magna volutpat.</p>
        </div>
      </li>
      <li class="marqueme">
        <div class="card-item">
          <p class="comment">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus turpis, imperdiet ac dui at, elementum viverra metus. Vestibulum at interdum neque, sodales dapibus massa. Phasellus non faucibus nibh. Aliquam in varius mauris. Proin sodales nulla quam, eget pellentesque lorem imperdiet quis. Sed placerat nisi lectus, ut tempus ante euismod eget. Phasellus rhoncus, lacus et varius dapibus, purus enim cursus tortor, et mattis velit lectus nec erat. Duis ultrices posuere eros. Praesent ut risus eros. Proin at lacus feugiat mauris ultrices feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac sapien ac mi lacinia elementum. Nunc posuere odio condimentum mi fermentum, ac dapibus diam pharetra. Phasellus sed justo rutrum, bibendum ante porttitor, tempor orci. Morbi porttitor mi sed mi ullamcorper, sit amet ultrices magna volutpat.</p>
        </div>
      </li>
    </ul>
    <!-- 复制一份列表 -->
    <ul class="testimonial-cards marquestarthere">
      <li class="marqueme">
        <div class="card-item">
          <p class="comment">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus turpis, imperdiet ac dui at, elementum viverra metus. Vestibulum at interdum neque, sodales dapibus massa. Phasellus non faucibus nibh. Aliquam in varius mauris. Proin sodales nulla quam, eget pellentesque lorem imperdiet quis. Sed placerat nisi lectus, ut tempus ante euismod eget. Phasellus rhoncus, lacus et varius dapibus, purus enim cursus tortor, et mattis velit lectus nec erat. Duis ultrices posuere eros. Praesent ut risus eros. Proin at lacus feugiat mauris ultrices feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac sapien ac mi lacinia elementum. Nunc posuere odio condimentum mi fermentum, ac dapibus diam pharetra. Phasellus sed justo rutrum, bibendum ante porttitor, tempor orci. Morbi porttitor mi sed mi ullamcorper, sit amet ultrices magna volutpat.</p>
        </div>
      </li>
      <li class="marqueme">
        <div class="card-item">
          <p class="comment">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus turpis, imperdiet ac dui at, elementum viverra metus. Vestibulum at interdum neque, sodales dapibus massa. Phasellus non faucibus nibh. Aliquam in varius mauris. Proin sodales nulla quam, eget pellentesque lorem imperdiet quis. Sed placerat nisi lectus, ut tempus ante euismod eget. Phasellus rhoncus, lacus et varius dapibus, purus enim cursus tortor, et mattis velit lectus nec erat. Duis ultrices posuere eros. Praesent ut risus eros. Proin at lacus feugiat mauris ultrices feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac sapien ac mi lacinia elementum. Nunc posuere odio condimentum mi fermentum, ac dapibus diam pharetra. Phasellus sed justo rutrum, bibendum ante porttitor, tempor orci. Morbi porttitor mi sed mi ullamcorper, sit amet ultrices magna volutpat.</p>
        </div>
      </li>
      <li class="marqueme">
        <div class="card-item">
          <p class="comment">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus turpis, imperdiet ac dui at, elementum viverra metus. Vestibulum at interdum neque, sodales dapibus massa. Phasellus non faucibus nibh. Aliquam in varius mauris. Proin sodales nulla quam, eget pellentesque lorem imperdiet quis. Sed placerat nisi lectus, ut tempus ante euismod eget. Phasellus rhoncus, lacus et varius dapibus, purus enim cursus tortor, et mattis velit lectus nec erat. Duis ultrices posuere eros. Praesent ut risus eros. Proin at lacus feugiat mauris ultrices feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac sapien ac mi lacinia elementum. Nunc posuere odio condimentum mi fermentum, ac dapibus diam pharetra. Phasellus sed justo rutrum, bibendum ante porttitor, tempor orci. Morbi porttitor mi sed mi ullamcorper, sit amet ultrices magna volutpat.</p>
        </div>
      </li>
      <li class="marqueme">
        <div class="card-item">
          <p class="comment">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus turpis, imperdiet ac dui at, elementum viverra metus. Vestibulum at interdum neque, sodales dapibus massa. Phasellus non faucibus nibh. Aliquam in varius mauris. Proin sodales nulla quam, eget pellentesque lorem imperdiet quis. Sed placerat nisi lectus, ut tempus ante euismod eget. Phasellus rhoncus, lacus et varius dapibus, purus enim cursus tortor, et mattis velit lectus nec erat. Duis ultrices posuere eros. Praesent ut risus eros. Proin at lacus feugiat mauris ultrices feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac sapien ac mi lacinia elementum. Nunc posuere odio condimentum mi fermentum, ac dapibus diam pharetra. Phasellus sed justo rutrum, bibendum ante porttitor, tempor orci. Morbi porttitor mi sed mi ullamcorper, sit amet ultrices magna volutpat.</p>
        </div>
      </li>
      <li class="marqueme">
        <div class="card-item">
          <p class="comment">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus turpis, imperdiet ac dui at, elementum viverra metus. Vestibulum at interdum neque, sodales dapibus massa. Phasellus non faucibus nibh. Aliquam in varius mauris. Proin sodales nulla quam, eget pellentesque lorem imperdiet quis. Sed placerat nisi lectus, ut tempus ante euismod eget. Phasellus rhoncus, lacus et varius dapibus, purus enim cursus tortor, et mattis velit lectus nec erat. Duis ultrices posuere eros. Praesent ut risus eros. Proin at lacus feugiat mauris ultrices feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac sapien ac mi lacinia elementum. Nunc posuere odio condimentum mi fermentum, ac dapibus diam pharetra. Phasellus sed justo rutrum, bibendum ante porttitor, tempor orci. Morbi porttitor mi sed mi ullamcorper, sit amet ultrices magna volutpat.</p>
        </div>
      </li>
      <li class="marqueme">
        <div class="card-item">
          <p class="comment">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus turpis, imperdiet ac dui at, elementum viverra metus. Vestibulum at interdum neque, sodales dapibus massa. Phasellus non faucibus nibh. Aliquam in varius mauris. Proin sodales nulla quam, eget pellentesque lorem imperdiet quis. Sed placerat nisi lectus, ut tempus ante euismod eget. Phasellus rhoncus, lacus et varius dapibus, purus enim cursus tortor, et mattis velit lectus nec erat. Duis ultrices posuere eros. Praesent ut risus eros. Proin at lacus feugiat mauris ultrices feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac sapien ac mi lacinia elementum. Nunc posuere odio condimentum mi fermentum, ac dapibus diam pharetra. Phasellus sed justo rutrum, bibendum ante porttitor, tempor orci. Morbi porttitor mi sed mi ullamcorper, sit amet ultrices magna volutpat.</p>
        </div>
      </li>
    </ul>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

2. 重构CSS：用CSS动画实现流畅滚动 #

利用@keyframes创建滚动动画，开启GPU加速，同时实现悬停暂停：

.marqueslide {
  overflow: hidden;
  width: 100%;
}

.marquee-container {
  display: flex;
  width: fit-content;
  animation: marquee-scroll 30s linear infinite; /* 调整时长控制滚动速度 */
}

.testimonial-cards {
  list-style: none;
  display: flex;
  gap: 31px;
  margin: 0;
  width: max-content;
  flex-wrap: nowrap;
}

.testimonial-cards li {
  width: 100%;
  max-width: 500px;
  min-height: 400px;
}

.marqueslide .marqueme {
  flex: 0 0 auto;
}

.testimonial-cards .card-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid #000;
}

/* 悬停暂停动画 */
.marqueslide:hover .marquee-container {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* 滚动到复制列表位置，实现无缝衔接 */
  }
}

3. 简化JS：无需复杂定时器 #

原JS逻辑可大幅