首页 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 瞬间完成，背景图预加载，肉眼无闪屏。