摘要：大家都在许多网站上见过轮播图。你可能也在自己的Web项目中使用过一些框架如Bootstrap来实现它。

大家都在许多网站上见过轮播图。你可能也在自己的Web项目中使用过一些框架如Bootstrap来实现它。

但是今天我们将使用HTML、CSS和JavaScript自己来实现它。而且在一些机器编码面试环节中，这个问题也可能会被问到。

在我们深入编码之前，让我们先了解一下轮播图的结构。

我们在主要的div内有4个div，每个div包含我们的图像（div.image__container）。

每个内部div包含一张图像，图像的宽度和高度都占满父元素，并且使用object-fit: cover属性，这样我们的每张图像就可以覆盖整个div。

现在，主要的div应该具有display: flex属性，这样我们的内部div就是一行排列的，但我们需要一次只显示一张图像，所以我们需要应用overflow: hidden属性。

我们需要两个按钮，一个用来切换到下一张图像，另一个用来返回到上一张图像。

经过这5步，我们的输出会是这样的。

这里有一件事要注意， 默认情况下flex属性的flex-shrink: 1设置给子元素，这就是为什么我们的图像会被缩小，但是对于我们的用例，我们希望div占据主容器的整个宽度。为了实现这一点，我们需要给内部div设置flex-shrink: 0。

经过这一步后，我们的输出会是这样的。

现在让我们来深入了解一下编码吧！！

1.HTML

代码语言：html

1.CSS

代码语言：css

1.JavaScript：这是所有魔法发生的地方。

这段代码块很容易理解，我们正在为我们的按钮添加事件监听器，以调用相应的函数。

我们从DOM中获取我们的图像并将它们存储在一个数组中。

代码语言：javascript

您一定见过，在轮播图中，图像会通过平滑的滑动效果滑动，因此为了添加相同的效果，我们创建了一个函数，为每个图像添加CSS样式。

现在让我们了解当用户单击下一个按钮时会发生什么。

首先，我们为我们的图像添加过渡效果，以便它们平滑滑动，产生滑动效果。

在CSS中，我们有transform属性，通过它我们可以以各种方式对HTML元素进行动画处理。但是对于我们的用例，我们希望以X（水平）方向移动我们的内部div，移动的像素或百分比是固定的。为此，我们有translateX函数。如果我们想要元素向右移动，传递的值将是正的，反之亦然。

现在，每次单击下一个按钮时，每个图像都会根据它们当前的位置向左移动，并更新索引加1。

在resetCarousel函数中，我们删除了过渡属性，因为每个图像都将返回到其正常位置，但是会出现像火车一样的滑动效果，我们不想要这样。移除这个属性将直接显示第一张图像，没有任何效果。您可以尝试在您的代码中删除它，看看会发生什么。

我们还剩下最后一件事，那就是如何使上一个按钮工作。

如果我们在第1张图像上，我们只是返回。

这部分的逻辑与下一个按钮功能相反。我们简单地通过-100%将图像translateX，并将索引减1。

来源：韵韵课堂