自适应轮播需三要素协同：容器用max-width: 100%而非固定像素；图片设width: 100%和height: auto保比例；JS轮播须实时获取宽度而非缓存offsetWidth。

轮播图容器必须用百分比或 max-width，不能写死 width: 800px

写死像素宽度是自适应失败最常见原因。浏览器窗口缩小时，<div class="carousel"> 如果设了 width: 1200px，就会横向溢出或触发滚动条。

正确做法是让容器「随父级伸缩」：

• width: 100% 或 max-width: 100%（推荐后者，更安全）
• 移除所有 min-width 硬限制（除非你明确需要最小宽度）
• 确保父容器（比如 <main> 或 <section>）本身也支持流式布局

img 标签必须加 width: 100% 和 height: auto

即使容器自适应了，图片仍可能按原始尺寸渲染，导致错位、拉伸或留白。

关键样式只有两条：

立即学习“前端免费学习笔记（深入）”；

img.carousel-item {
  width: 100%;
  height: auto;
}

注意：height: auto 不能省——它保证宽高比不变；如果写成 height: 100%，图片会被强制拉伸变形。

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

JS 轮播逻辑里别读 offsetWidth 做固定像素计算

很多老教程用 element.offsetWidth 获取轮播项宽度，再乘以索引算偏移量。这在响应式下会立刻失效：窗口缩放后，offsetWidth 变了，但 JS 缓存的旧值没更新，导致跳帧或卡死。

解决方案分两种场景：

• 纯 CSS 轮播（推荐）：用 transform: translateX(-50%) + transition，靠 scrollLeft 或 getBoundingClientRect() 动态读取当前宽度
• JS 控制：每次切换前重新调用 item.getBoundingClientRect().width，而不是初始化时只读一次
• 使用 ResizeObserver 监听容器变化，自动重置轮播状态

移动端触摸滑动要防默认行为，但别误禁 click

加了 touchstart 后常有人直接写 e.preventDefault()，结果导致按钮点击失效、链接打不开。

真正该阻止的是页面滚动干扰轮播，不是所有事件：

carousel.addEventListener('touchstart', e => {
  // 只在水平滑动意图明显时阻止默认行为
  if (Math.abs(e.touches[0].clientX - startX) > 10) {
    e.preventDefault(); // 防止页面跟着拖拽滚动
  }
});

另外，记得给轮播容器加 user-select: none，避免长按唤起文字选中菜单。

自适应轮播最难的不是写法，而是「宽度来源是否可靠」：CSS 层面靠 max-width 和 width: 100%，JS 层面靠实时测量而非缓存，图片层靠 height: auto 保比例——三者缺一不可。