窗口宽度<825px时禁用JavaScript滑块功能的代码问题求助

看起来你的代码有几个关键问题导致功能异常，我帮你梳理并修正一下：

问题分析 #

• 你把滑块的核心函数（plusDivs、showDivs）放在了resize事件的else分支里，这意味着只有窗口宽度≥825px时这些函数才会被定义，而且每次窗口 resize 都会重复定义，容易引发作用域和重复绑定的问题。
• 页面初始加载时，你只获取了窗口宽度，但没有执行对应的滑块启用/禁用逻辑。
• 缺少禁用滑块时的具体操作（比如隐藏控制按钮、停止自动轮播、重置滑块状态）。

修正后的代码 #

$(document).ready(function() {
    // 把滑块核心函数放在外层，确保始终可访问
    let slideIndex = 1;
    let slideTimer; // 存储自动轮播的定时器

    function plusDivs(n) {
        showDivs(slideIndex += n);
    }

    function showDivs(n) {
        let i;
        let slides = $(".mySlides"); // 替换为你实际的滑块元素类名
        let dots = $(".demo"); // 如果有页码指示器，替换为对应类名
        if (n > slides.length) {slideIndex = 1}    
        if (n < 1) {slideIndex = slides.length}
        for (i = 0; i < slides.length; i++) {
            slides.eq(i).hide();  
        }
        for (i = 0; i < dots.length; i++) {
            dots.eq(i).removeClass("active");
        }
        slides.eq(slideIndex-1).show();  
        dots.eq(slideIndex-1).addClass("active");
    }

    // 统一的滑块控制函数：根据窗口宽度启用/禁用
    function toggleSlider() {
        const windowWidth = $(window).width();
        const sliderControls = $(".slider-controls"); // 替换为你控制按钮的容器类名
        const prevBtn = $(".prev");
        const nextBtn = $(".next");

        if (windowWidth < 825) {
            // 禁用滑块：隐藏控制按钮、停止自动轮播、重置状态
            sliderControls.hide();
            clearInterval(slideTimer);
            slideIndex = 1;
            showDivs(slideIndex);
            // 移除按钮点击事件，避免残留绑定
            prevBtn.off("click");
            nextBtn.off("click");
        } else {
            // 启用滑块：显示控制按钮、绑定事件、启动自动轮播
            sliderControls.show();
            prevBtn.click(() => plusDivs(-1));
            nextBtn.click(() => plusDivs(1));
            // 自动轮播（间隔3秒，可根据需求调整）
            slideTimer = setInterval(() => plusDivs(1), 3000);
            showDivs(slideIndex);
        }
    }

    // 页面加载时执行一次初始化
    toggleSlider();

    // 窗口resize时执行（加防抖避免频繁触发，优化性能）
    let resizeTimer;
    $(window).resize(function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(toggleSlider, 250);
    });
});

关键优化点 #

• 作用域修复：把滑块核心函数移到外层，避免只有大窗口时才定义函数的问题。
• 统一控制逻辑：用toggleSlider函数集中处理启用/禁用逻辑，避免代码重复。
• 防抖处理：窗口resize时加定时器防抖，避免频繁触发函数导致性能损耗。
• 完整的禁用操作：不仅停止功能，还隐藏控制按钮、重置状态、移除事件绑定，确保小屏幕下滑块完全失效。

你可以根据自己的HTML结构调整代码中的类名（比如.mySlides、.slider-controls），适配你的实际滑块元素。

内容的提问来源于stack exchange，提问作者W.Ernest