原生JS利用transform实现banner的无限滚动示例代码

让我来讲解一下如何利用原生JS实现banner的无限滚动。

基本思路

首先，我们需要获取到需要滚动的 banner 图片，将它们垂直排列起来，接着用 CSS 的 transform 将整个容器向上移动，直到第一张图片完全消失后，将它的下一张图片放到容器的底部，实现 banner 的无限滚动。

HTML 结构

<div class="banner">
  <div class="banner-wrap">
    <img src="./images/banner1.jpg" alt="banner1">
    <img src="./images/banner2.jpg" alt="banner2">
    <img src="./images/banner3.jpg" alt="banner3">
    <img src="./images/banner4.jpg" alt="banner4">
    <img src="./images/banner5.jpg" alt="banner5">
  </div>
</div>

CSS 样式

.banner {
  width: 100%;
  height: 600px;
  overflow: hidden;
}

.banner-wrap {
  width: 100%;
  height: 3000px;
  position: relative;
  transition: transform 1s;
}
.banner-wrap img {
  width: 100%;
}

JS 代码

// 获取元素
const banner = document.querySelector('.banner');
const bannerWrap = document.querySelector('.banner-wrap');
const bannerImgs = bannerWrap.querySelectorAll('img');

// 定义变量
const bannerHeight = banner.clientHeight; // banner图片宽度
let curIndex = 0; // 当前显示的图片编号

// 自动滚动
function move() {
  curIndex++;
  bannerWrap.style.transform = `translateY(-${bannerHeight * curIndex}px)`;

  // 当滚动到最后一张图片时，重置为第一张图片
  if (curIndex === bannerImgs.length - 1) {
    setTimeout(() => {
      curIndex = 0;
      bannerWrap.style.transform = `translateY(0)`;
    }, 1000);
  }
}

// 每3秒自动滚动图片
setInterval(move, 3000);

以上就是用原生 JS 实现 banner 无限滚动的代码和思路了。其中，通过 clientHeight 获取到了 banner 的高度，并用 setInterval 设置了滚动间隔。同时，通过 transition 属性实现了滚动时的平滑过渡。如果需要增加 banner 的数量，只需在 HTML 结构中增加图片，并修改变量 curIndex 的最大值即可。

示例说明一

如果您的 banner 都是水平排列的，只需将 translateY 改为 translateX 就可以实现横向无限滚动。

示例说明二

如果您需要增加滚动的速度，只需将 setInterval 函数中的 3000 改为更小的数字即可。但是需要注意的是，过快的滚动速度会导致用户体验不佳。