如何实现悬停时图片多帧循环、离开恢复静态，且使用img标签而非div？

完全可以仅使用img标签实现需求，无需借助div背景方案，以下是可直接运行的完整实现：

完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>悬停帧动画</title>
    <style>
        /* 可选：固定图片尺寸避免帧切换时布局抖动 */
        #animImg {
            width: 300px;
            height: auto;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 直接使用img标签，默认加载第一帧静态图 -->
    <img id="animImg" src="https://i.sstatic.net/Nr2Xk.png" alt="帧动画">

    <script>
        // 配置项：动画帧列表、切换间隔（单位毫秒）
        const frameList = [
            "https://i.sstatic.net/Nr2Xk.png",
            "https://i.sstatic.net/yicji.png",
            "https://i.sstatic.net/3dGdm.png",
            "https://i.sstatic.net/LTQOv.png"
        ];
        const switchInterval = 200; // 可自行调整数值修改切换速度

        const imgDom = document.getElementById('animImg');
        let timer = null;
        let currentFrameIndex = 0;

        // 预加载所有图片帧，避免悬停时加载卡顿
        frameList.forEach(src => {
            const img = new Image();
            img.src = src;
        });

        // 鼠标悬停事件：启动帧循环
        imgDom.addEventListener('mouseenter', () => {
            timer = setInterval(() => {
                currentFrameIndex = (currentFrameIndex + 1) % frameList.length;
                imgDom.src = frameList[currentFrameIndex];
            }, switchInterval);
        });

        // 鼠标移出事件：停止循环，恢复默认静态图
        imgDom.addEventListener('mouseleave', () => {
            clearInterval(timer);
            timer = null;
            currentFrameIndex = 0;
            imgDom.src = frameList[0];
        });
    </script>
</body>
</html>

实现逻辑说明 #

• 默认状态下img标签加载列表第一帧作为静态展示图
• 鼠标进入img区域时启动定时器，按设定间隔循环切换src属性为后续帧
• 鼠标移出时清空定时器，重置src为第一帧静态图
• 提前预加载所有图片帧，避免首次切换时出现加载空白

内容的提问来源于stack exchange，提问作者Jay