如何为jQuery自动切换背景脚本添加媒体断点？

你可以通过检测窗口宽度+管理定时器的方式实现需求，无需冗余的div元素。核心思路是：定义不同断点对应的背景图数组，在页面加载和窗口尺寸变化时，根据当前宽度匹配对应数组，同时清理旧定时器避免冲突。

修改后的完整代码 #

jQuery(function ($) {
    // 定义断点与对应背景图的配置，后续扩展新断点直接加对象即可
    const bgConfigs = [
        {
            breakpoint: 1024, // 窗口宽度 >=1024px 时使用该组背景图
            images: [
                "url(c-l.png) no-repeat",
                "url(c-w.png) no-repeat",
                "url(c-m.png) no-repeat",
                "url(c-b.png) no-repeat"
            ]
        },
        {
            breakpoint: 0, // 窗口宽度 <1024px 时使用（默认 fallback）
            images: [
                "url(c-l-s.png) no-repeat",
                "url(c-w-s.png) no-repeat",
                "url(c-m-s.png) no-repeat",
                "url(c-b-s.png) no-repeat"
            ]
        }
    ];

    let bgTimer = null; // 存储定时器ID，用于后续清除旧定时器

    function getCurrentBgImages() {
        const windowWidth = $(window).width();
        // 从大到小匹配断点，确保优先应用大尺寸的配置
        for (const config of bgConfigs) {
            if (windowWidth >= config.breakpoint) {
                return config.images;
            }
        }
        return bgConfigs[bgConfigs.length - 1].images; // 兜底返回最后一组配置
    }

    function changeBackground(selector, time) {
        // 先清除旧定时器，避免多个定时器同时修改背景导致混乱
        if (bgTimer) {
            clearInterval(bgTimer);
            bgTimer = null;
        }

        const currentImages = getCurrentBgImages();
        let curIndex = 0;

        // 启动新的背景切换定时器
        bgTimer = setInterval(function () {
            if (curIndex === currentImages.length) curIndex = 0;
            $(selector).css("background", currentImages[curIndex]);
            curIndex++;
        }, time);
    }

    // 页面加载完成后初始化背景切换
    $(window).on('load', function () {
        changeBackground("#shop .container", 5000);
    });

    // 窗口尺寸变化时触发切换（加防抖避免频繁执行）
    let resizeTimeout;
    $(window).on('resize', function () {
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(function () {
            changeBackground("#shop .container", 5000);
        }, 200); // 200ms防抖延迟，可根据需求调整
    });
});

关键细节说明 #

• 配置化管理：所有断点和对应背景图都放在bgConfigs数组里，后续要加新断点（比如768px），直接新增一个配置对象即可，维护成本低。
• 定时器冲突解决：每次切换背景前都会清除旧定时器，防止页面同时运行多个切换逻辑，导致背景跳变混乱。
• resize防抖：窗口缩放时不会立刻触发切换，等待200ms确认用户调整完窗口后再执行，减少不必要的性能消耗。
• 断点匹配逻辑：从大到小判断窗口宽度，确保大尺寸屏幕优先匹配对应的背景图组，符合响应式设计的常规逻辑。

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