在米哈游的游戏官网中，需要实现一个简单的图片轮播组件，要求使用原生 JavaScript，且能自动切换图片。请描述实现思路并给出关键代码示例。

Question

Accepted Answer

推荐使用分层分析法来解答此题。首先明确需求分层，然后逐步实现各层功能。关键要点如下：1. HTML 结构：创建一个包含图片的容器元素，为后续操作提供基础。例如使用 div 包裹图片。2. CSS 样式：设置图片容器的样式，确保图片显示正常且布局合理，如设置宽度、高度、溢出隐藏等。3. JavaScript 逻辑：实现自动切换图片的功能，可通过定时器改变图片的显示索引。4. 边界处理：当索引超出图片数量时，重置索引，保证循环显示。示例思路：先创建 HTML 结构，添加图片到容器中；接着用 CSS 对容器进行样式设置；最后使用 JavaScript 编写定时器逻辑，控制图片切换。以下是关键代码示例：
javascript
const images = document.querySelectorAll('.slider img');
let index = 0;
setInterval(() => {
  images[index].style.display = 'none';
  index = (index + 1) % images.length;
  images[index].style.display = 'block';
}, 3000);