JavaScript之手把手教你做轮播图，2024阿里、网易、京东等大厂最新前端面试题

📖 多张图放置原理

首先，我们要先知道怎么把五张图放进去，这个其实很简单，如果css学的不错的小伙伴应该一眼就看出来，我们可以用浮动，让五张图排列在外部大盒子里。

接下来，我们需要让某一张显示出来，这个实现的方法不唯一，但是比较通用的是，给大盒子设置成绝对定位，给小盒子设置成相对定位，同时小盒子是大盒子的父元素，于是有：

大盒子因为绝对定位，脱标后，不占空间，小盒子相对定位，占有空间；

于是给小盒子设置一个overflow:hidden，即可满足我们的需求。

这样就完成了图片放置的原理介绍。

---

📖 平滑滚动原理

聊平滑滚动之前，我们先聊聊怎么把这几张图片切换进小盒子吧，这其实特别简单，我们只需要调整外部大容器css样式left即可：

但是能不能做到平滑滚动，其实是新手和老手的第一道分水岭了，新手可能通过周期性调整left值，觉得自己做出了轮播图，其实这么做应该叫"轮切图"，因为你不是播放的，是切换的图片，那平滑性，要如何实现呢？

这就需要我们通过封装一个动画函数，来实现运行的平滑性！

这部分，我们在后面会讲解具体的封装过程。

---

📖 定时与点击滚动原理

定时、点击滚动，其实算不上有什么原理，但我们也要实现它。

实现的思路是给整个过程设置一个定时器，让定时器定时地执行轮播；再给前进/后退按钮绑定对应的切换函数，即可完成这一步，因此这一步难度并不大(相比其他步骤)。

---

📖 首尾无缝衔接原理

首尾无缝衔接的实现，是第二道分水岭，那首尾无缝衔接，到底是什么意思呢？我相信很多人一直没有搞明白，那我继续用图片给大家解释：

请看，当我们的大盒子继续移动，使得最后一张图呈现在小盒子里之后，下一个时刻，我们知道它应该回到第一张图了。那么，传统的做法是：

判断是否是最后一张，如果是最后一张图，那么在播完最后一张图后，滑动到第一张图。