手把手教你实现自定义轮播图：使用HTML、CSS和JavaScript构建
原创手把手教你实现自定义轮播图：使用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
<!DOCTYPE html>
<head>
<link href="carousel.css" rel="stylesheet" />
</head>
<body>
<div id="carousel__container">
<div class="img__container">
<img class="carousel__img" src="https://i.ibb.co/K2KkmJx/florian-olivo-4hb-J-eym-Z1o-unsplash.jpg" alt="carousel-img" />
</div>
<div class="img__container">
<img class="carousel__img" src="https://i.ibb.co/3Nmfpsm/jackson-sophat-t-l5-FFH8-VA-unsplash.jpg" alt="carousel-img" />
</div>
<div class="img__container">
<img class="carousel__img" src="https://i.ibb.co/sVXbVdr/nathan-da-silva-k-r-Kfq-Sm4-L4-unsplash.jpg" alt="carousel-img" />
</div>
<div class="img__container">
<img class="carousel__img" src="https://i.ibb.co/fMf7S4k/kobu-agency-ip-ARHax-ETRk-unsplash.jpg" alt="carousel-img" />
</div>
<button id="prev-btn" class="btn">P</button>
<button id="next-btn" class="btn">N</button>
</div>
</body>
<script src="carousel.js"></script>
</html>- 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中获取我们的图像并将它们存储在一个数组中。
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样式。
function addTransitionEffectToImages() {
images.forEach((img) => {
img.style.transition = "transform 0.8s ease";
});
}现在让我们了解当用户单击下一个按钮时会发生什么。
首先，我们为我们的图像添加过渡效果，以便它们平滑滑动，产生滑动效果。
在CSS中，我们有transform属性，通过它我们可以以各种方式对HTML元素进行动画处理。但是对于我们的用例，我们希望以X（水平）方向移动我们的内部div，移动的像素或百分比是固定的。为此，我们有translateX函数。如果我们想要元素向右移动，传递的值将是正的，反之亦然。
transform : translateX(50px); // 向右移动元素50px
transform : translateX(-30px); // 向左移动元素30px
transform : translateX(100%); // 向右移动元素，移动距离为它
的长度
transform : translateX(-100%); // 向左移动元素，移动距离为它的长度现在，每次单击下一个按钮时，每个图像都会根据它们当前的位置向左移动，并更新索引加1。
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。
function showPrevImage() {
if (currentImageIndex === 0) return; //如果我们在第一张图像上，那么直接返回
//在showNextImage中所做的逻辑相反
images.forEach((img) => {
img.style.transform = `translateX(${(currentImageIndex - 1) * -100}%)`;
});
currentImageIndex--;
}我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
