实现鼠标滚动切换图片+7秒无滚动自动切换功能求助

你的代码缺少对自动切换定时器的正确管理逻辑，我帮你调整了代码，实现了需求：

<script>
const imageContainer = document.querySelector('.image-container');
const images = document.querySelectorAll('.image');
let currentIndexScroll = 0;
let isScrolling = false;
let hasScrolled = false;
let autoSwitchTimer = null; // 存储自动切换定时器ID

function getRandomIndex(max) {
    return Math.floor(Math.random() * max);
}

// 抽离切换到随机图片的逻辑，复用代码
function switchToRandomImage() {
    if (isScrolling) return; // 用户正在滚动时不执行自动切换
    currentIndexScroll = getRandomIndex(images.length);
    images.forEach((image, index) => {
        image.style.opacity = index === currentIndexScroll ? 1 : 0;
    });
}

// 重置自动切换定时器：清除旧定时器，重新设置7秒后触发
function resetAutoSwitchTimer() {
    clearTimeout(autoSwitchTimer);
    autoSwitchTimer = setTimeout(switchToRandomImage, 7000);
}

document.addEventListener('wheel', (e) => {
    if (isScrolling) return;

    const delta = e.deltaY;
    const sensitivity = 40;

    if (Math.abs(delta) > sensitivity && !hasScrolled) {
        switchToRandomImage(); // 复用切换逻辑
        hasScrolled = true;
    }

    if (hasScrolled) {
        isScrolling = true;
        setTimeout(() => {
            isScrolling = false;
            hasScrolled = false;
        }, 600);
        resetAutoSwitchTimer(); // 用户滚动后重置自动切换定时器
    }
});

// 页面初始化时启动自动切换
resetAutoSwitchTimer();
</script>

关键改动说明： #

• 新增autoSwitchTimer变量：用来跟踪自动切换的定时器，方便后续清除和重置，避免多个定时器同时触发。
• 抽离switchToRandomImage函数：把原来写在wheel事件里的图片切换逻辑单独拎出来，不管是手动滚动还是自动切换都能用，减少代码冗余。
• 新增resetAutoSwitchTimer函数：每次用户滚动或者页面初始化时调用，先清除之前的定时器，再重新设置7秒后自动切换，确保用户操作后自动切换的计时重新开始。
• 页面初始化调用resetAutoSwitchTimer：打开页面后就启动自动切换逻辑，无需等待用户操作。
• 自动切换时判断isScrolling：避免用户正在滚动的时候自动切换，防止交互冲突。

这样修改后，用户7秒内没有滚动操作，图片就会自动切换；每次滚动后，自动切换的计时会重新从7秒开始算。

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