点击按钮实现testimonial图片与文本切换交互及bug修复求助

你遇到的问题核心是同一个currentIndex_desktop变量被两个切换函数先后修改：点击「上一个」按钮时，previousImage_desktop先修改了索引，紧接着previousText_desktop再次修改索引；点击「下一个」按钮时同理。这会导致图片和文本的切换不同步，甚至出现多个元素同时带有激活类（main/first）的混乱状态。

重构代码逻辑，统一计算索引后再同步更新图片和文本的激活状态，避免重复修改索引：

<!-- SCRIPT DESKTOP -->
<script>
const previous_desktop = document.querySelector('.previous_desktop');
const next_desktop = document.querySelector('.next_desktop');
const images_desktop = document.querySelectorAll('.SecondDiv_desktop > .TestimonialDiv_desktop > .testimonials');
const testimonials_desktop = document.querySelectorAll('.SecondDiv_desktop > .navigation-buttons > .Horizontal_swipe > .testimonials_text');
// 假设图片与文本数量一致，用同一总数即可
const totalItems = images_desktop.length;
let currentIndex_desktop = 0;

// 统一更新图片与文本的激活状态
function updateActiveElements() {
    // 重置所有图片的激活类
    images_desktop.forEach(img => img.classList.remove('main'));
    // 给当前索引的图片添加激活类
    images_desktop[currentIndex_desktop].classList.add('main');

    // 重置所有文本的激活类
    testimonials_desktop.forEach(text => text.classList.remove('first'));
    // 给当前索引的文本添加激活类
    testimonials_desktop[currentIndex_desktop].classList.add('first');
}

// 上一个按钮点击事件
previous_desktop.addEventListener('click', () => {
    currentIndex_desktop = currentIndex_desktop === 0 ? totalItems - 1 : currentIndex_desktop - 1;
    updateActiveElements();
});

// 下一个按钮点击事件
next_desktop.addEventListener('click', () => {
    currentIndex_desktop = currentIndex_desktop === totalItems - 1 ? 0 : currentIndex_desktop + 1;
    updateActiveElements();
});

// 页面加载时初始化激活状态
updateActiveElements();
</script>

• 单一索引变更：点击按钮时仅修改一次索引，从根源避免不同步问题
• 公共更新函数：将图片与文本的类切换逻辑合并，减少重复代码
• 初始化激活：页面加载时自动激活第一个元素，确保初始状态正确

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