如何用原生JavaScript在浏览器窗口调整时刷新轮播图宽度变量？

我来帮你梳理下这个问题的根源，以及对应的解决办法～

问题原因 #

你当前的代码只在页面首次加载时通过let size = carousel_images[0].clientWidth;获取了一次轮播图的宽度，但当你调整浏览器窗口时，媒体查询会触发并修改.carousel和内部img的尺寸，可你的size变量并没有随之更新，轮播逻辑依然沿用旧的宽度值，这就导致了显示异常；而刷新页面时，代码会重新获取当前视口下的正确宽度，所以又恢复正常了。

解决方案 #

核心思路是：在窗口尺寸变化时，重新计算轮播图宽度并更新轮播逻辑，具体步骤如下：

1. 封装获取尺寸的函数
   把获取轮播图宽度的逻辑抽成独立函数，方便重复调用：

function getCarouselWidth() {
  const carouselImages = document.querySelectorAll('.carousel img');
  // 避免找不到元素报错
  if (carouselImages.length === 0) return 0;
  return carouselImages[0].clientWidth;
}

2. 初始化时获取宽度
   页面加载完成后，调用函数初始化size变量：

let size = getCarouselWidth();
// 这里执行你的轮播初始化逻辑，比如设置容器宽度、初始位移等
initCarousel();

3. 监听窗口 resize 事件，实时更新
   给窗口添加resize监听，每次窗口尺寸变化时重新计算宽度，并同步更新轮播的状态。另外为了避免频繁触发事件影响性能，建议加上防抖处理：

// 防抖函数：延迟执行回调，避免resize频繁触发
function debounce(func, delay = 200) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 监听窗口 resize
window.addEventListener('resize', debounce(() => {
  // 重新获取最新宽度
  size = getCarouselWidth();
  // 更新轮播相关逻辑，比如重新设置容器宽度、修正滚动位置等
  updateCarousel();
}));

关键补充 #

你需要把轮播图的核心逻辑（比如设置容器总宽度、计算每张图的位移、切换动画等）封装到updateCarousel函数中，这样每次尺寸更新时，所有依赖宽度的逻辑都会重新执行，确保轮播图始终适配当前视口。

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