缩略图切换主图时src报undefined的根本原因是未正确获取主图dom或缩略图缺少data-large-src属性；应使用id定位主图、data-large-src存大图路径、事件委托绑定；图片闪屏需预加载+显隐切换；ios滚动需加-webkit-overflow-scrolling:touch；轮播冲突应通过ispaused变量统一控制暂停逻辑。
缩略图点击切换主图时 src 报 undefined
常见现象是点缩略图后主图不换，控制台报 Cannot set property 'src' of null 或 undefined。根本原因是没正确拿到主图 DOM 元素，或缩略图没带可读取的图片地址。
必须确保：
– 主图 <img> 有稳定、唯一的 id（如 id="main-image"），别用 class 或临时生成的 id；
– 缩略图用 data-large-src 存大图路径，而不是靠 src 拼接或正则替换（比如把 thumb_1.jpg 改成 full_1.jpg，极易出错）；
– 绑定事件时统一委托给缩略图容器，别对每个 <img> 单独 addEventListener，否则新增缩略图要重复绑定。
推荐写法：
document.querySelector('.thumbnails').addEventListener('click', e => {
if (e.target.tagName === 'IMG') {
const largeSrc = e.target.dataset.largeSrc;
const mainImg = document.getElementById('main-image');
if (mainImg && largeSrc) {
mainImg.src = largeSrc;
}
}
});
切换时图片闪一下或白屏
直接赋值 img.src 后浏览器会立刻清空旧图、发起新请求，网络稍慢就明显卡顿或白屏。这不是 JS 逻辑问题，而是加载时机没控制好。
解决思路是「预加载 + 显隐切换」：
– 主图容器设 position: relative，内部放两张 <img>，都 position: absolute; top: 0; left: 0; 叠在一起；
– 当前图加 class="active"，下一张先隐藏（opacity: 0），等 load 事件触发后再淡入；
– CSS 加 transition: opacity 0.3s ease;，避免硬切。
关键判断：只在 nextImg.complete === true 或监听到 load 后才开始过渡，否则用户看到的是黑块或占位符。
缩略图横向滚动在 iOS 上拖拽粘滞
iOS Safari 默认的 overflow-x: auto 容器拖拽手感差，松手后不回弹、惯性弱，用户会误以为“卡死了”。这不是 JS 性能问题，是滚动行为未启用原生优化。
必须加两条 CSS：
– scroll-behavior: smooth（现代浏览器平滑滚动）；
– -webkit-overflow-scrolling: touch（iOS 必加，开启硬件加速滚动）；
– 缩略图用 display: inline-block 或 display: flex 布局，禁用 float（浮动易引发重排，影响滚动帧率）；
– 加 user-select: none 防止长按误触发图片选中。
轮播自动播放与用户交互冲突
用户点“下一张”后，定时器还在跑，可能立刻又切走，体验断裂。不能简单 clearInterval 再重启——容易漏掉边界情况，比如鼠标移入时暂停，但移出瞬间定时器已触发。
稳妥做法：
– 用一个布尔变量 isPaused 标记状态，所有操作（点击、hover）都只改它；
– setInterval 回调开头加 if (isPaused) return;；
– 鼠标移入容器设 isPaused = true，移出延时 2s 再设 false（防抖，避免快速进出反复启停）；
– 手动切换后也设 isPaused = true，但不延时恢复，等用户明确移出再交还控制权。
注意：setInterval 的毫秒值别设太小（如 500ms），真实场景下 3000–5000 更合理；过短会导致用户来不及看清就切走，反而增加跳出率。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
