原生 JS 借助 transform 达成 banner 无限滚动

在当今的网页设计中，创建一个吸引人的 banner 滚动效果是提升用户体验和增加页面互动性的重要手段。原生 JavaScript 结合 CSS 的 transform 属性，可以轻松实现 banner 的无限滚动效果。

我们需要准备 HTML 结构。一个简单的容器元素用于容纳 banner 图片，每个图片作为一个子元素放置在容器中。

<div class="banner-container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

接下来，使用 CSS 来设置容器和图片的样式。

.banner-container {
  overflow: hidden;
  width: 100%;
}

.banner-container img {
  width: 100%;
  height: auto;
  display: block;
}

然后，通过原生 JavaScript 来实现滚动效果。

let container = document.querySelector('.banner-container');
let images = container.children;
let imageWidth = images[0].clientWidth;
let totalImages = images.length;
let currentIndex = 0;

function scrollBanner() {
  currentIndex++;
  if (currentIndex >= totalImages) {
    currentIndex = 0;
  }
  container.style.transform = `translateX(-${currentIndex * imageWidth}px)`;
  setTimeout(scrollBanner, 3000);
}

scrollBanner();

在上述代码中，首先获取容器和图片元素，计算出每张图片的宽度。通过一个变量 currentIndex 来跟踪当前显示的图片索引。在 scrollBanner 函数中，递增索引，当超过图片总数时重置为 0，然后使用 transform 属性将容器向左平移相应的宽度，实现滚动效果。通过 setTimeout 函数每隔 3 秒调用一次 scrollBanner 函数，实现无限滚动。

原生 JS 借助 transform 实现 banner 无限滚动，不仅能够提升页面的动态效果，还能减少对第三方库的依赖，提高页面加载速度和性能。通过巧妙的运用 JavaScript 和 CSS 的特性，我们可以为用户带来更加流畅和吸引人的浏览体验。

无论是在商业网站、博客还是个人项目中，这种技术都能为页面增添一份独特的魅力，吸引用户的注意力，提升页面的价值和影响力。不断探索和创新，将这种技术与其他设计元素相结合，定能创造出更加出色的网页效果。