JavaScript幻灯片标题切换异常求助：仅显示Queen4或undefined

核心问题分析 #

1. txtSwitcher函数循环逻辑错误：你在函数里用for循环遍历所有标题，每次循环都会覆盖标题内容，循环结束后必然停在最后一个元素（下标3的"Queen4"），这就是标题始终显示它的原因。
2. 上一页按钮未触发标题切换：点击prevBtn时只调用了swap()切换图片，没有调用txtSwitcher()，导致标题无法同步更新，可能出现undefined或停留在旧标题。
3. 标题索引未与图片索引关联：你没有利用已经维护的currentImage变量匹配对应标题，反而用循环强行遍历，完全偏离了“同步切换”的逻辑。

修复后的完整代码 #

// START OF Slideshow with Event Listener
(function(){
    "use strict";

    const myImages = ['sets/queen3.jpg', 'sets/queen4.jpg', 'sets/queen5.jpg', 'sets/queen6.jpg'];
    const queensNames = ["Queen1", "Queen2", "Queen3", "Queen4"]; // 移到外部避免重复创建
    let currentImage = 0;
    const container = document.getElementById('content');
    const nextBtn = document.getElementById('next');
    const prevBtn = document.getElementById('previous');
    const queenTitle = document.getElementById('img-title'); // 提前获取DOM元素，避免重复查询

    // 初始化标题，避免加载时为空
    queenTitle.innerHTML = queensNames[currentImage];

    function swap(){
        const newSlide = document.createElement('img');
        newSlide.src = myImages[currentImage];
        newSlide.className = 'fadeinimg';
        container.appendChild(newSlide);

        if(container.children.length > 2){
            container.removeChild(container.children[0]);
        }
    };

    nextBtn.addEventListener('click', function(event){
        event.preventDefault();
        currentImage++;
        if(currentImage > (myImages.length - 1)){currentImage = 0;}

        swap();
        txtSwitcher();
    });

    prevBtn.addEventListener('click', function(event){
        event.preventDefault();
        currentImage--;
        if(currentImage < 0){currentImage = myImages.length - 1;}
    
        swap();
        txtSwitcher(); // 新增调用，同步标题
    });

    function txtSwitcher(){
        // 直接用currentImage作为索引匹配对应标题
        queenTitle.innerHTML = queensNames[currentImage];
    };

})();
// END OF : Slideshow Event Listener

关键修复点说明 #

• 将queensNames数组和标题DOM元素查询移到函数外部，避免重复创建和查询，提升性能。
• 移除txtSwitcher里的无用循环，通过currentImage索引直接关联对应标题，实现图片与标题同步切换。
• 给prevBtn的点击事件添加txtSwitcher()调用，确保上一页切换时标题同步更新。
• 初始化时设置默认标题，避免页面加载时标题为空或显示undefined。

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