手把手教你实现自定义轮播图：使用HTML、CSS和JavaScript构建

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

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

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

我们有一个主要的div，我们可以称之为容器（div#container），它具有一定的宽度和高度。

我们在主要的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。

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

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

HTML代码语言：html复制

CSS代码语言：css复制#carousel__container {

position: relative;

display: flex;

width: 600px;

height: 300px;

overflow: hidden;

border: 1px solid red;

}

.img__container {

width: 100%;

height: 100%;

flex-shrink: 0;

}

.img__container > img {

width: 100%;

height: 100%;

object-fit: cover;

}

.btn {

position: absolute;

top: 50%;

border-radius: 50%;

color: black;

background-color: white;

border: none;

outline: none;

padding: 5px 7px;

cursor: pointer;

}

#prev-btn {

left: 10px;

}

#next-btn {

right: 10px;

}JavaScript：这是所有魔法发生的地方。这段代码块很容易理解，我们正在为我们的按钮添加事件监听器，以调用相应的函数。

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

代码语言：javascript代码运行次数：0运行复制const nextBtn = document.getElementById("next-btn");

const prevBtn = document.getElementById("prev-btn");

nextBtn.addEventListener("click", showNextImage);

prevBtn.addEventListener("click", showPrevImage);

//document.getElementsByClassName返回HTML collection，所以我们使用 "Array.from" 方法来获取一个可迭代的对象

const images = Array.from(document.getElementsByClassName("carousel__img"));

const totalImages = images.length;

let currentImageIndex = 0; //正在屏幕上显示的图像的索引您一定见过，在轮播图中，图像会通过平滑的滑动效果滑动，因此为了添加相同的效果，我们创建了一个函数，为每个图像添加CSS样式。

代码语言：javascript代码运行次数：0运行复制function addTransitionEffectToImages() {

images.forEach((img) => {

img.style.transition = "transform 0.8s ease";

});

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

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

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

代码语言：css复制transform : translateX(50px); // 向右移动元素50px

transform : translateX(-30px); // 向左移动元素30px

transform : translateX(100%); // 向右移动元素，移动距离为它

的长度

transform : translateX(-100%); // 向左移动元素，移动距离为它的长度现在，每次单击下一个按钮时，每个图像都会根据它们当前的位置向左移动，并更新索引加1。

代码语言：javascript代码运行次数：0运行复制function showNextImage() {

//如果我们在最后一张图像上重置轮播图

if (currentImageIndex == totalImages - 1) {

resetCarousel();

return;

}

if (currentImageIndex === 0) addTransitionEffectToImages();

//每次移动到下一张图像时将所有图像都向左移动-100%

images.forEach((img) => {

img.style.transform = `translate(${(currentImageIndex + 1) * -100}%)`;

});

currentImageIndex++;

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

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

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

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

代码语言：javascript代码运行次数：0运行复制function showPrevImage() {

if (currentImageIndex === 0) return; //如果我们在第一张图像上，那么直接返回

//在showNextImage中所做的逻辑相反

images.forEach((img) => {

img.style.transform = `translateX(${(currentImageIndex - 1) * -100}%)`;

});

currentImageIndex--;

}我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！