在小米的智能家居产品展示页面中，常会有产品图片轮播的需求。请使用原生 JavaScript 实现一个简单的图片轮播功能，要求能自动切换图片，且支持手动切换。

答题要点

本题推荐使用过程分析法来解答。关键要点如下：1. HTML 结构搭建：创建一个包含图片容器和切换按钮的 HTML 结构，图片使用 `img` 标签展示，按钮用于手动切换。2. CSS 样式设置：设置图片容器的样式，确保图片能正确显示且轮播时布局合理，隐藏多余图片。3. JavaScript 逻辑实现：使用 `setInterval` 函数实现自动切换，通过修改 `img` 的 `src` 属性或图片元素的显示隐藏状态来切换图片；为手动切换按钮添加点击事件监听器，点击时更新当前显示的图片。示例思路：首先编写 HTML 代码，将图片和按钮放入合适的容器中；接着用 CSS 设置样式；最后编写 JavaScript 代码，初始化图片索引，实现自动和手动切换功能。