网站轮播Banner鼠标悬停停止功能实现求助（jQuery）

我看了你的代码，问题主要出在事件绑定逻辑和定时器管理混乱上，咱们一步步来修复：

问题分析 #

1. hover事件仅添加日志，未处理核心逻辑：你在mostrarBanner里绑定了hover事件，但只打印了日志，没有真正执行停止/重启轮播的关键操作。
2. 定时器重复创建冲突：每次调用mostrarBanner都会先清除定时器再重新创建，导致轮播的定时器状态混乱，全局初始化的定时器和函数内的定时器互相干扰。
3. 事件重复绑定风险：如果mostrarBanner被多次调用，hover事件会被重复绑定，可能引发不可预期的行为。

修正后的代码 #

var executar;
var banner = 0;

// 专门负责启动轮播定时器的函数
function iniciarCarousel() {
    executar = setInterval(function() {
        $('.carousel-banner .next').trigger('click');
    }, 1000);
}

// 切换指定Banner显示的逻辑
function mostrarBanner(indice) {
    // 隐藏所有轮播项
    $('.carousel-banner .item-carousel').css({ 'opacity': '0', 'z-index': '0' });
    // 显示目标轮播项
    $('.carousel-banner .item-carousel').eq(indice).css({ 'opacity': '1', 'z-index': '1' });
}

// 绑定鼠标悬停事件（仅执行一次，避免重复绑定）
$('#banner').hover(
    function() {
        // 鼠标进入：清除定时器，停止轮播
        clearInterval(executar);
        console.log("DENTRO - 轮播已停止");
    },
    function() {
        // 鼠标离开：重启轮播定时器
        iniciarCarousel();
        console.log("FORA - 轮播已重启");
    }
);

// 初始化轮播
mostrarBanner(banner);
iniciarCarousel();

关键修复点说明 #

• 分离职责：把定时器启动、Banner切换、事件绑定拆成独立逻辑，避免代码耦合导致的混乱。
• 正确管理定时器状态：鼠标进入时用clearInterval彻底停止定时器，离开时重新启动，确保轮播状态一致。
• 事件仅绑定一次：hover事件绑定放在全局作用域，不会因mostrarBanner的重复调用而重复绑定。
• DOM选择器确认：请确保#banner是你的轮播容器元素，鼠标悬停时能正确触发事件，如果选择器不对，事件根本不会执行。

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