当前位置：首页 > JavaScript

js 实现无缝

2026-03-14 16:35:24JavaScript

使用 CSS 动画实现无缝滚动

通过 CSS 的 @keyframes 和 animation 属性可以实现无缝滚动效果。将内容复制一份，通过动画移动位置，当滚动到复制的部分时，瞬间跳回原始位置，形成无缝循环。

.scroll-container {
  overflow: hidden;
  white-space: nowrap;
}

.scroll-content {
  display: inline-block;
  animation: scroll 10s linear infinite;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

使用 JavaScript 实现无缝轮播

通过动态计算位置和克隆节点实现无缝轮播。当滚动到最后一项时，快速跳转到第一项，避免视觉上的间断。

const container = document.querySelector('.slider');
const items = document.querySelectorAll('.slider-item');
let currentIndex = 0;

function nextSlide() {
  currentIndex = (currentIndex + 1) % items.length;
  container.style.transform = `translateX(-${currentIndex * 100}%)`;

  if (currentIndex === items.length - 1) {
    setTimeout(() => {
      container.style.transition = 'none';
      container.style.transform = 'translateX(0)';
      setTimeout(() => {
        container.style.transition = 'transform 0.5s ease';
      }, 10);
    }, 500);
  }
}

setInterval(nextSlide, 2000);

使用 requestAnimationFrame 实现高性能无缝滚动

通过 requestAnimationFrame 实现高性能的无缝滚动，适合大量数据或复杂动画场景。

const content = document.querySelector('.scroll-content');
const clone = content.cloneNode(true);
document.querySelector('.scroll-container').appendChild(clone);

let position = 0;
function animate() {
  position -= 1;
  if (position <= -content.offsetWidth) {
    position = 0;
  }
  content.style.transform = `translateX(${position}px)`;
  clone.style.transform = `translateX(${position + content.offsetWidth}px)`;
  requestAnimationFrame(animate);
}

animate();

使用 CSS Scroll Snap 实现无缝分页

现代浏览器支持的 CSS Scroll Snap 技术可以实现平滑的分页滚动效果，结合 JavaScript 可实现无缝循环。

.scroll-container {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

.scroll-item {
  scroll-snap-align: start;
  flex: 0 0 100%;
}

const container = document.querySelector('.scroll-container');
container.addEventListener('scroll', () => {
  if (container.scrollLeft >= container.scrollWidth - container.clientWidth) {
    container.scrollTo(0, 0);
  }
});

使用 WebGL 或 Canvas 实现高级无缝动画

对于复杂的无缝动画效果，如无限背景、粒子系统等，可以使用 WebGL 或 Canvas 实现。

js 实现无缝

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
let x = 0;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, 50, 100, 100);
  x += 1;
  if (x > canvas.width) x = -100;
  requestAnimationFrame(draw);
}

draw();

以上方法可以根据具体需求选择适合的实现方式，CSS 方案适合简单效果，JavaScript 方案提供更多控制，WebGL/Canvas 适合高性能复杂动画。

标签: js