简易图片轮播

简易图片轮播

一、实现思路

1. 准备图片路径数组和索引变量
2. 每2秒执行一次切换函数
3. 切换时：更换图片 + 更新高亮按钮

---

二、核心变量

javascript

let num = 0;                              // 当前显示第几张（0开始）
let srcs = ["img/1.jpg", "img/2.jpg", "img/3.jpg"];  // 图片列表
let img = document.querySelector('img');   // 图片元素
let as = document.querySelectorAll('a');   // 所有按钮

---

三、切换逻辑（重点）

javascript

function changeImg() {
  // 1. 取消当前按钮高亮
  as[num].className = 'trans';

  // 2. 索引循环：0→1→2→0→1...
  if (num < srcs.length - 1) {
    num++;
  } else {
    num = 0;
  }

  // 3. 更换图片
  img.src = srcs[num];

  // 4. 高亮新按钮
  as[num].className = 'red';
}

索引变化过程

text

当前: 0  →  新: 1  (不是最后)
当前: 1  →  新: 2  (不是最后)
当前: 2  →  新: 0  (已是最后，回到0)
当前: 0  →  新: 1  ...循环

---

四、定时器

javascript

setInterval(changeImg, 2000);  // 每2秒切换一次

---

五、按钮高亮原理

类名	效果
red	红色背景（当前选中）
trans	透明背景（未选中）

每次切换：

1. 旧按钮 → trans（取消高亮）
2. 新按钮 → red（高亮）

---

六、完整流程图

text

页面加载 → 显示第0张，按钮0高亮
    ↓ (每2秒)
取消旧按钮高亮
    ↓
索引 +1（到最后则回到0）
    ↓
更换图片
    ↓
新按钮高亮
    ↓
回到等待

---

七、关键代码速查

作用	代码
获取图片	document.querySelector('img')
获取所有按钮	document.querySelectorAll('a')
修改图片	img.src = "新路径"
切换类名	元素.className = '类名'
循环执行	setInterval(函数, 毫秒)
数组长度	srcs.length