JavaScript图片轮播：如何高效实现流畅的图片轮播效果并支持按钮控制和鼠标交互？

// 索引和长度
let index1 = 0, len1;
// 图片元素数组
const hisBox = document.getElementsByClassName("history");
// 容器
const count = document.getElementsByClassName("left-arrow");
len1 = hisBox.length;
hisBox[index1].style.display = 'block';

let animationFrameId; // 用于取消动画帧

function hisSlideShow() {
    hisBox[index1].style.display = 'none';
    index1 = (index1 + 1) % len1;
    hisBox[index1].style.display = 'block';
    animationFrameId = requestAnimationFrame(hisSlideShow);
}

// 开始按钮 (假设按钮id为startButton)
const startButton = document.getElementById('startButton');
startButton.addEventListener('click', () => {
    animationFrameId = requestAnimationFrame(hisSlideShow);
});

// 暂停按钮 (假设按钮id为pauseButton)
const pauseButton = document.getElementById('pauseButton');
pauseButton.addEventListener('click', () => {
    cancelAnimationFrame(animationFrameId);
});

// 继续按钮 (假设按钮id为resumeButton)
const resumeButton = document.getElementById('resumeButton');
resumeButton.addEventListener('click', () => {
    animationFrameId = requestAnimationFrame(hisSlideShow);
});

// 鼠标移入暂停，移出继续 (假设容器class为container)
const container = document.querySelector('.container');
container.addEventListener('mouseenter', () => {
    cancelAnimationFrame(animationFrameId);
});
container.addEventListener('mouseleave', () => {
    animationFrameId = requestAnimationFrame(hisSlideShow);
});