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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

现在还觉得简单吗？

项目要求练习本项目你会收获什么？本项目适合的同学

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

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

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

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

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

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