JQuery/CSS精灵图动画问题：点击左右箭头切换失效求助

我明白你现在遇到的困扰：用包含4张520px高图片的精灵图做切换动画，点左右箭头没反应，改了代码加了CSS还是没搞定。结合精灵图切换的常见坑，我给你整理了排查方向和完整的可运行示例，你可以对照着调整：

先给你一个完整的可运行代码示例 #

你可以先把这个基础版本跑起来，再替换成你自己的资源：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>FVRC Pics</title>
    <meta charset="UTF-8">
    <link type="text/css" href="styles/normalize.css" rel="stylesheet" />
    <style>
        /* 核心样式 */
        .sprite-wrap {
            position: relative;
            width: 300px; /* 替换成你单张图的实际宽度 */
            height: 520px;
            overflow: hidden; /* 关键：只显示当前区域的图 */
            margin: 20px auto;
            border: 1px solid #ddd;
        }

        .sprite-img {
            width: 1200px; /* 单张宽度×4，比如300×4=1200 */
            height: 520px;
            background: url('你的精灵图路径') no-repeat top left;
            transition: transform 0.3s ease; /* 平滑动画的关键 */
        }

        .nav-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 2rem;
            background: rgba(0,0,0,0.6);
            color: white;
            border: none;
            padding: 8px 12px;
            cursor: pointer;
            z-index: 10;
            border-radius: 4px;
        }

        .left-arrow {
            left: 10px;
        }

        .right-arrow {
            right: 10px;
        }
    </style>
</head>
<body>
    <div class="sprite-wrap">
        <button class="nav-arrow left-arrow">&lt;</button>
        <div class="sprite-img"></div>
        <button class="nav-arrow right-arrow">&gt;</button>
    </div>

    <script>
        // 先确保DOM加载完成再执行（如果你的JS放在head里，这步很重要）
        document.addEventListener('DOMContentLoaded', function() {
            const spriteEl = document.querySelector('.sprite-img');
            const leftBtn = document.querySelector('.left-arrow');
            const rightBtn = document.querySelector('.right-arrow');
            
            const totalImgs = 4;
            const singleImgHeight = 520;
            let currentIdx = 0;

            // 更新精灵图位置的核心函数
            function switchSprite() {
                // 垂直排列的精灵图：用transform向上偏移对应高度
                spriteEl.style.transform = `translateY(-${currentIdx * singleImgHeight}px)`;
                // 如果是水平排列的精灵图，改成translateX(-${currentIdx * 单张宽度}px)
            }

            // 左箭头逻辑：循环回到最后一张
            leftBtn.addEventListener('click', function() {
                currentIdx = (currentIdx - 1 + totalImgs) % totalImgs;
                switchSprite();
            });

            // 右箭头逻辑：循环回到第一张
            rightBtn.addEventListener('click', function() {
                currentIdx = (currentIdx + 1) % totalImgs;
                switchSprite();
            });

            // 初始化显示第一张图
            switchSprite();
        });
    </script>
</body>
</html>

你大概率踩了这些坑，逐一排查： #

1. 精灵图尺寸/路径错误
   • 打开浏览器F12的元素面板，检查.sprite-img的background路径是否正确，宽度是否是「单张图宽度×4」，高度是否是520px。如果路径错了或者尺寸不对，根本看不到图，更别说切换了。
2. 事件绑定失败
   • 如果控制台报Cannot read property 'addEventListener' of null，说明你的JS代码在DOM元素加载前就执行了。要么把JS放在</body>标签前，要么用上面示例里的DOMContentLoaded包裹代码。
3. 没有设置overflow:hidden
   • 容器.sprite-wrap必须加overflow: hidden，否则整个精灵图都会显示出来，你看不到切换的效果。
4. 动画过渡没加
   • 没有给.sprite-img加transition属性的话，切换会瞬间完成，看起来像没反应。
5. 偏移计算错误
   • 如果你的精灵图是垂直排列，要算Y轴的偏移；如果是水平排列，要算X轴的偏移。别搞反了，不然会跑到空白区域。

排查小技巧 #

点击箭头时，打开F12的元素面板，盯着.sprite-img的transform属性看有没有变化。如果属性变了但图没动，就是尺寸/overflow的问题；如果属性没变化，就是事件绑定或者逻辑的问题。

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