无限轮播效果，这道题你能解吗？

在我们的第 2 个原创项目(戳此了解)中，我们已经实现了天猫首页，但那是一个完全静态的天猫首页，看起来有点傻傻的，没有生气。

如果你还没有练习这个项目，可以看下我们官方参考答案的体验网页(点击这里查看)，是不是傻傻的？

如果，我们可以让天猫首页的 banner 动起来，是不是很有趣呢？

先让我们看看天猫首页官方的效果吧：

这是一个非常常见的无限轮播效果。

简单来说，就是每个 banner 展示一段时间，然后往左切换下一个 banner，再展示同样的一段时间，到了最后一个 banner 之后会切换回第一个 banner，形成一个无限循环的轮播图。

另外一个要注意的是，banner 的底部有一个 banner 序号指示器，表示现在是第几个 banner，当切换到某个 banner 的时候，对应的小圆点也需要“高亮”。

这样的效果，估计很多前端老鸟都已经开发过了，虽然是个洒洒水的小 case，但实现起来还是有一丢丢麻烦呢，而且还需要 CSS 配合 JS 一起来实现。

但是，对于按照 之道前端学习路线(戳此了解) 来学习的前端新人来说，咱们还没开始学 JS 呢！

因此，我把这道题放在了第 2 个原创项目的阶段 3，作为一个可选的挑战类题目。

如果你觉得难可以不做，跳过它也没事，不影响后续的学习。

如果你想挑战一下自己，挑战一下刚刚学习的 CSS 动画知识，那就继续往下看吧。

让我们把这个无限循环的轮播效果抽象一下：

• banner 总数不重要，但至少要有 3 个 banner
• 页面加载后，默认显示第 1 个 banner，它至少要展示 1 s（这个时间可以配置）
• banner 的轮播是无限循环的，banner 切换动画总共耗时 1s（这个时间可以配置）
• 切换到新的 banner 之后，需要停顿展示 1s（这个时间可以配置）
• banner 组件的底部有序号显示器，就是那 3 个小圆点，这 3 个小圆点是要跟随 banner 的切换而切换的
• 3 个小圆点跟 banner 按顺序一一对应，当切换新 banner 的动画结束的瞬间，新 banner 对应的小圆点要被点亮

关键的规则就这些，看起来好像很简单是不是？但本题最后的要求是：

禁止使用 JS，只能使用 HTML & CSS 来完成这个无限轮播 banner 效果！

现在还觉得简单吗？

项目要求

• 把你在 s2 阶段实现的页面代码 copy 过来，然后在它的基础上实现这个轮播 banner 效果
• 禁止使用 JS，只能使用 HTML & CSS
• 不要查看参考答案或教程！
• 先自己思考，动手测试，然后再去网上找思路或者答案，最后再看参考答案或教程

练习本项目你会收获什么？

• 学会如何实现 banner 轮播效果，很多页面都有这种组件，可以直接用在你的工作上
• 练习 CSS 动画相关知识，提升相关知识点的掌握程度
• 深刻理解 CSS 动画
• 如果你做不出来，那么本题的参考答案也会是你的一种收获，收获一种纯 CSS 动画实现的思路和技巧

本项目适合的同学

• 处于 L0&L1 水平的同学
• 没有实现过轮播 banner 组件的同学
• 希望了解、学习、练习、深刻理解 CSS 动画相关知识的同学
• 喜欢迎接挑战和难题的同学

如果屏幕前的你已经是有经验的前端开发了，那也非常欢迎你来解一下这道题哈。

虽然平常工作中不会出现这样的苛刻条件，但也算是帮你复习一下 CSS 动画知识点了，说不定还能帮你寻回当初学习 CSS 的那段美好时光呢~

最后，在没有实现出来之前，请不要偷看答案哦，下周我就会分享解这道题的详细思路，欢迎关注。

----------------【END】----------------

如果你是真心喜欢前端，并相信成长，想要提升自己的话，欢迎加入之道前端学习圈子。

戳这里 免费获取 之道前端的学习资料和专属服务。