如何用JavaScript高效实现流畅的图片轮播效果？

const hisBox = document.getElementsByClassName("history");
const prevBtn = document.getElementById("prevBtn"); // 前一个按钮
const nextBtn = document.getElementById("nextBtn"); // 后一个按钮
let index = 0;
let len = hisBox.length;
let animationFrameId;

function slideShow() {
  const translateX = -index * 100 + '%'; // 假设每张图片占100%宽度
  hisBox[0].style.transform = `translateX(${translateX})`; // 假设所有图片都在同一个容器内
  index = (index + 1) % len;
  animationFrameId = requestAnimationFrame(slideShow);
}

function pauseSlideShow() {
  cancelAnimationFrame(animationFrameId);
}

function changeSlide(direction) {
  pauseSlideShow();
  index = (index + (direction === 'next' ? 1 : -1) + len) % len;
  slideShow();
}

hisBox[0].style.willChange = 'transform'; // 优化性能
hisBox[0].style.display = 'block'; // 初始显示第一张图片
slideShow();

prevBtn.addEventListener('click', () => changeSlide('prev'));
nextBtn.addEventListener('click', () => changeSlide('next'));
hisBox[0].parentElement.addEventListener('mouseover', pauseSlideShow);
hisBox[0].parentElement.addEventListener('mouseout', slideShow);

<div class="slideshow-container">
  <div class="history-wrapper">
    <div class="history">@@##@@</div>
    <div class="history">@@##@@</div>
    <div class="history">@@##@@</div>
    <!-- ... more images ... -->
  </div>
  <button id="prevBtn">Previous</button>
  <button id="nextBtn">Next</button>
</div>