自定义轮播组件setInterval首次执行后停止问题求助

我来帮你排查并解决这个定时器的问题，你的代码逻辑已经很接近了，主要是鼠标事件绑定和定时器管理的小问题：

问题根源分析 #

• 鼠标事件不匹配：你把mouseenter绑定在父容器#our-mission，但mouseout绑定在子元素.statement。mouseout事件会在鼠标离开元素或其子元素时触发（比如鼠标从.statement移到内部的prev/next按钮上），这会意外停止定时器，导致轮播中断。
• 定时器重复创建风险：每次触发mouseenter就直接创建新定时器，如果之前的定时器没被清理，会导致多个定时器同时运行，或者旧定时器未被正确停止。
• 手动点击后定时器未维持：由于上述鼠标事件的问题，点击按钮时会意外触发停止逻辑，之后没有自动恢复。

修复后的完整代码 #

JavaScript部分 #

$(document).ready(function() {
    statementScroll();
});
function statementScroll() {
    var intervalStatement = 0;
    var intervalFunc = {
        start: function() {
            // 启动前先清理已有定时器，避免重复创建
            if (intervalStatement) {
                clearInterval(intervalStatement);
            }
            intervalStatement = setInterval(function() {
                $("#our-mission .statement .next").click();
            }, 2000);
        },
        stop: function() {
            clearInterval(intervalStatement);
            intervalStatement = 0;
        },
    };
    $("#our-mission .statement .next").on("click", function() {
        if ($("#our-mission .statement .item.active").next(".item").length) {
            $("#our-mission .statement .item.active").removeClass("active").next(".item").addClass("active");
        } else {
            $("#our-mission .statement .item.active").removeClass("active");
            $("#our-mission .statement .item").first().addClass("active");
        }
    });
    $("#our-mission .statement .prev").on("click", function() {
        if ($("#our-mission .statement .item.active").prev(".item").length) {
            $("#our-mission .statement .item.active").removeClass("active").prev(".item").addClass("active");
        } else {
            $("#our-mission .statement .item.active").removeClass("active");
            $("#our-mission .statement .item").last().addClass("active");
        }
    });
    // 统一绑定鼠标进入/离开事件到父容器，使用mouseleave代替mouseout
    $("#our-mission")
        .on("mouseenter", function() {
            intervalFunc.start();
        })
        .on("mouseleave", function() {
            intervalFunc.stop();
        });
}

CSS与HTML部分 #

你的CSS和HTML代码无需修改，保持原逻辑即可。

关键修复点说明 #

• 替换mouseout为mouseleave：mouseleave只会在鼠标完全离开绑定元素（#our-mission整个容器）时触发，不会因为鼠标移动到子元素（比如按钮）而误触发停止逻辑。
• 启动定时器前先清理旧定时器：避免重复创建多个定时器，确保每次只有一个定时器在运行。
• 统一事件绑定目标：把鼠标进入/离开事件都绑定到#our-mission，逻辑更清晰，避免事件触发范围混乱。

这样修改后，自动轮播会在鼠标hover容器时持续运行，点击prev/next按钮也不会中断定时器，鼠标离开容器时定时器会正确停止，再次hover时恢复正常。

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