网页自动轮播图是前端开发中最常见的交互组件之一，广泛应用于首页Banner、产品展示、活动推广等场景。本教程将带你从零实现一个带图文切换效果的自动轮播图，无需依赖任何第三方库，仅使用原生HTML、CSS和JavaScript。整个实现过程分为HTML结构搭建、CSS样式美化、JavaScript逻辑控制三个核心部分。最终效果包括：图片自动轮播、底部指示器同步高亮、左右箭头手动切换、以及平滑的过渡动画。
### 前置准备
在开始编写代码之前，请确保你具备以下条件：
1. **开发工具**：任意文本编辑器（如VS Code、Sublime Text、记事本均可）。
2. **图片素材**：准备3-5张尺寸一致的图片（建议宽高比为16:9或4:3，例如800x400像素）。你可以使用本地图片，也可以使用网络图片链接。本教程示例将使用占位图片服务。
3. **基本知识**：了解HTML标签的基本结构、CSS选择器与属性、JavaScript基础语法（如变量、函数、事件监听、定时器）。
4. **文件结构**：创建一个新文件夹，在该文件夹内新建三个文件：`index.html`（结构）、`style.css`（样式）、`script.js`（逻辑）。你也可以将所有代码写在同一个HTML文件中（通过`