- 作者:老汪软件技巧
- 发表时间:2024-11-18 15:06
- 浏览量:
在我们的第 2 个原创项目(戳此了解)中,我们已经实现了天猫首页,但那是一个完全静态的天猫首页,看起来有点傻傻的,没有生气。
如果你还没有练习这个项目,可以看下我们官方参考答案的体验网页(点击这里查看),是不是傻傻的?
如果,我们可以让天猫首页的 banner 动起来,是不是很有趣呢?
先让我们看看天猫首页官方的效果吧:
这是一个非常常见的无限轮播效果。
简单来说,就是每个 banner 展示一段时间,然后往左切换下一个 banner,再展示同样的一段时间,到了最后一个 banner 之后会切换回第一个 banner,形成一个无限循环的轮播图。
另外一个要注意的是,banner 的底部有一个 banner 序号指示器,表示现在是第几个 banner,当切换到某个 banner 的时候,对应的小圆点也需要“高亮”。
这样的效果,估计很多前端老鸟都已经开发过了,虽然是个洒洒水的小 case,但实现起来还是有一丢丢麻烦呢,而且还需要 CSS 配合 JS 一起来实现。
但是,对于按照 之道前端学习路线(戳此了解) 来学习的前端新人来说,咱们还没开始学 JS 呢!
因此,我把这道题放在了第 2 个原创项目的阶段 3,作为一个可选的挑战类题目。
如果你觉得难可以不做,跳过它也没事,不影响后续的学习。
如果你想挑战一下自己,挑战一下刚刚学习的 CSS 动画知识,那就继续往下看吧。
让我们把这个无限循环的轮播效果抽象一下:
关键的规则就这些,看起来好像很简单是不是?但本题最后的要求是:
禁止使用 JS,只能使用 HTML & CSS 来完成这个无限轮播 banner 效果!
现在还觉得简单吗?
项目要求练习本项目你会收获什么?本项目适合的同学
如果屏幕前的你已经是有经验的前端开发了,那也非常欢迎你来解一下这道题哈。
虽然平常工作中不会出现这样的苛刻条件,但也算是帮你复习一下 CSS 动画知识点了,说不定还能帮你寻回当初学习 CSS 的那段美好时光呢~
最后,在没有实现出来之前,请不要偷看答案哦,下周我就会分享解这道题的详细思路,欢迎关注。
----------------【END】----------------
如果你是真心喜欢前端,并相信成长,想要提升自己的话,欢迎加入之道前端学习圈子。
戳这里 免费获取 之道前端的学习资料和专属服务。