网站ArrowKey事件监听失效，求实现画廊图片箭头切换功能

原代码存在两个核心问题导致箭头键功能失效：

• 箭头键事件监听器未绑定到全局文档，仅在缩略图创建循环中定义但未注册
• 缺少当前展示图片的索引追踪，无法实现前后切换逻辑

修复步骤 #

1. 添加当前索引追踪变量：在全局作用域声明currentImageIndex，初始化为0（对应默认展示的第一张图）
2. 绑定全局箭头键事件：将handleArrowKeyPress函数绑定到document的keydown事件，确保整个页面都能响应按键
3. 实现selectNextImage函数：根据传入的步长（1为下一张，-1为上一张）更新索引，处理循环边界（索引超出数组长度时回到起点/终点）
4. 修正缩略图点击逻辑：点击缩略图时同步更新currentImageIndex
5. 修复alt文本播报错误：原代码中announceAltText(images.alt)应为announceAltText(image.alt)，确保播报单个图片的alt文本

完整修复代码 #

HTML部分 #

<div id="thumbnail-box" class="thumbnail-box" tabindex="0">
</div>
<section tabindex="0">
  <img src="" alt="" id="display" tabindex="0">
</section>
<div id="announcer" aria-live="polite" aria-atomic="true"></div>

JavaScript部分 #

// 全局变量
let thumbNailBox = document.getElementById(`thumbnail-box`)
let displayImage = document.getElementById(`display`)
const announcer = document.getElementById(`announcer`)
// 追踪当前展示图片的索引
let currentImageIndex = 0

// 图片数组
let images = [
    {
        url: `https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a4c6a31d-c586-4ac6-9172-1d5c2b9d41cf/d60wfgx-49772b1b-8b09-4a01-84eb-f04d8dd81f43.png/v1/fill/w_999,h_800,q_70,strp/south_park__wallpaper_eric_cartman_by_hieifireblaze_d60wfgx-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9ODIwIiwicGF0aCI6IlwvZlwvYTRjNmEzMWQtYzU4Ni00YWM2LTkxNzItMWQ1YzJiOWQ0MWNmXC9kNjB3Zmd4LTQ5NzcyYjFiLThiMDktNGEwMS04NGViLWYwNGQ4ZGQ4MWY0My5wbmciLCJ3aWR0aCI6Ijw9MTAyNCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.oX3t6Ps7YpCVd7OZDtwYyaIqTYocSNSLYGp6dJaIPKY`,
        alt: `cartman with a red background` 
    },
    {
        url: `https://wallpapers.com/images/hd/south-park-s-stan-marsh-simple-art-ad3wjf4su96o4mam.jpg`,
        alt: `Stan with a blue background`
    }, 
    {
        url: `https://facts.net/wp-content/uploads/2023/09/22-facts-about-kyle-broflovski-south-park-1694601417.jpg`,
        alt: `Kyle with a green background`
    },
    {
        url:`https://www.thefactsite.com/wp-content/uploads/2020/04/kenny-facts.jpg`, 
        alt: `Kenny with an orange background`
    }
]

// 创建缩略图
const makeThumbNails = (images) => {
    images.forEach( (image, index) => {
        let img = document.createElement(`img`)
        img.src = image.url
        img.alt = image.alt
        img.className= `img`
        // 点击缩略图切换大图并更新索引
        img.addEventListener("click",() => {
            currentImageIndex = index
            createDisplayImage(image)
        })
        thumbNailBox.appendChild(img)
        // 播报当前缩略图alt文本
        announceAltText(image.alt)
    })
}

// 切换展示大图
function createDisplayImage(image) {
    displayImage.src = image.url
    displayImage.alt = image.alt
    displayImage.className = `display-img`
    announceAltText(displayImage.alt)
}

// 播报alt文本
function announceAltText(altText) {
    announcer.textContent = `New image displayed: ${altText}`
}

// 箭头键切换逻辑
function selectNextImage(step) {
    // 更新索引，处理循环边界
    currentImageIndex += step
    if (currentImageIndex < 0) {
        currentImageIndex = images.length - 1
    } else if (currentImageIndex >= images.length) {
        currentImageIndex = 0
    }
    // 切换到对应图片
    createDisplayImage(images[currentImageIndex])
}

// 箭头键事件处理
function handleArrowKeyPress(event) {
    if (event.key === 'ArrowRight') {
        selectNextImage(1);
    } else if (event.key === 'ArrowLeft') {
        selectNextImage(-1)
    }
}

// 绑定全局按键事件
document.addEventListener('keydown', handleArrowKeyPress)

// 初始化
makeThumbNails(images)
createDisplayImage(images[0])

关键说明 #

• 全局绑定keydown事件，确保任何时候按下箭头键都能响应
• currentImageIndex追踪当前图片位置，切换时自动处理循环（比如最后一张按右箭头回到第一张）
• 点击缩略图时同步更新索引，保证箭头键切换的连贯性
• 修正了alt文本播报的错误，现在能正确播报每个图片的描述

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