本文介绍如何使用原生 JavaScript 正确获取动态切换的 .current_video 元素，避免 querySelector 总是返回首个匹配项的问题，并提供可立即运行的轮播控制方案。
本文介绍如何使用原生 javascript 正确获取动态切换的 `.current_video` 元素，避免 `queryselector` 总是返回首个匹配项的问题，并提供可立即运行的轮播控制方案。
在构建多视频轮播组件时，一个常见误区是：误以为 document.querySelector('.current_video') 能实时捕获当前激活项，却忽略了 DOM 更新与 JS 执行时机的同步问题。实际上，querySelector 确实能准确返回当前带有 .current_video 类的唯一元素——但前提是它在类已更新 之后 被调用。你原始代码中 video = document.querySelectorAll(".current_video > .video") 出现在初始化阶段（而非 currentSlide() 内部），导致它仅执行一次，始终读取初始状态，因此控制台总显示第一个视频。
✅ 正确做法是：将元素查询逻辑封装进状态变更函数中，在每次切换后即时获取最新 .current_video 下的视频节点。以下是优化后的完整实现：
let slide = 0;
const slides = document.querySelectorAll('.cover-background > .video_container');
const numSlides = slides.length;
// 自动轮播定时器
let autonext = null;
function startAutoSlide() {
stopAutoSlide();
autonext = setInterval(nextSlide, 10000);
}
function stopAutoSlide() {
clearInterval(autonext);
}
function nextSlide() {
// 移除上一个 current_video
slides[slide].classList.remove('current_video');
// 计算下一个索引（循环）
slide = (slide + 1) % numSlides;
// 添加到新元素
slides[slide].classList.add('current_video');
// ✅ 关键：在此处实时获取当前视频并操作
const currentVideo = slides[slide].querySelector('.video');
if (currentVideo) {
currentVideo.load(); // 重载媒体资源（尤其切换 source 时必要）
currentVideo.play().catch(e => console.warn("Autoplay prevented:", e));
}
}
function prevSlide() {
slides[slide].classList.remove('current_video');
slide = (slide - 1 + numSlides) % numSlides;
slides[slide].classList.add('current_video');
const currentVideo = slides[slide].querySelector('.video');
if (currentVideo) {
currentVideo.load();
currentVideo.play().catch(e => console.warn("Autoplay prevented:", e));
}
}
// 初始化自动轮播
startAutoSlide();
// 绑定手动控制按钮（示例）
document.getElementById('btn-next')?.addEventListener('click', nextSlide);
document.getElementById('btn-prev')?.addEventListener('click', prevSlide);? 关键注意事项：
- ❌ 避免在全局作用域或初始化块中静态缓存 document.querySelector(...) 结果；DOM 是动态的，引用需“按需获取”。
- ✅ 使用 Element.querySelector()（单个）而非 querySelectorAll()（多个）定位 .current_video > .video，因 .current_video 始终唯一，且更精准高效。
- ⚠️ 视频 autoplay 在现代浏览器中受策略限制（需用户交互或静音），务必调用 .play() 并处理 Promise 拒绝；.load() 可确保资源重新加载（尤其切换不同 src 时）。
- ? 循环索引推荐写法：(slide + 1) % numSlides（正向）和 (slide - 1 + numSlides) % numSlides（反向），避免负数取模异常。
该方案完全基于原生 JavaScript，无依赖、无框架，结构清晰、可维护性强，适用于任意数量的视频容器轮播场景。
立即学习“Java免费学习笔记（深入）”；
