JS 打造仿腾讯影视轮播导航_js 打造仿腾讯影视轮播导航的软件
首页 Banner 不是简单的「几张图轮播」，而是「大图 + 侧边导航 + 自动播放 + 手动介入」的复合组件。本文用 JS原生代码实现一条无依赖、可复用、可扩展的影视轮播链路，涵盖数据驱动、事件委托、状态管理三大核心技能。
效果预览
一、数据约定
把后端返回的列表抽象成统一结构：
// data.js
const data = [
{
title: "三十而已",
desc: "话题爽剧！姐姐飒气挑战",
img: "",
bg: "rgb(25,117,180)"
},
// ... 更多对象
]- title：导航主标题
- desc：副标题，用于 hover 提示
- img：大图地址
- bg：背景色，与大图同步切换
二、html骨架
<div class="content">
<div class="top-nav"></div>
<div class="imgs" id="imgs">
</div>
<div class="side-bar" id="side-bar">
<a href="#" class="cnhz">
<img src="./img/all.png">
猜你会追
</a>
<a href="#" class="zbtj">
<img src="./img/tj.png">
重磅推荐
</a>
</div>
</div>三、js链式渲染三步走
1.初始化：生成大图与导航
一次循环同时生成两张「a」：左侧大图与右侧导航，减少遍历次数。
2.鼠标介入：hover 即切换
使用 onmouseenter 而非 onmouseover，避免子元素冒泡导致频繁触发。
3.自动播放：定时器 + 索引循环
nextIndex = (index + 1) % data.length 实现首尾循环；nextIndex + 2 跳过「猜你会追」和「重磅推荐」两个标题节点。
四、边界与优化细节
1.鼠标离开继续自动播放
tagNav.onmouseleave = () => {
t = setInterval(move, 3000)
}2.背景色同步切换
大图 a 的 backgroundColor 直接读取 item.bg，避免额外计算。
3.长文字截断
CSS 设置 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，hover 时通过 title 属性展示完整标题。
4.无闪烁切换
display: none <-> block 瞬间完成，背景图预加载，肉眼无闪屏。
