使用 HTML、CSS 和 JavaScript 创建轮播图
在本文中，我们将讨论如何使用 HTML、CSS 和 JavaScript 构建轮播图。我们将演示两种不同的创建滑块的方法，一种是基于opacity的滑块，另一种是基于transform的。
创建 HTML
我们首先从 HTML 代码开始：
<div class="slider">
<div class="slide">
<img src="images/1.jpg" alt="demo image" />
</div>
<div class="slide">
<img src="images/2.jpg" alt="demo image" />
</div>
. . .
<a class="prev" onclick="prevSlide()"><</a>
<a class="next" onclick="nextSlide()">></a>
</div>
.slider元素充当整个图像滑块的容器。
单独的幻灯片.slide元素与图像一起封装在容器中。
滑块导航由.prev、.next两个按钮元素控制。
我们还为导航设置了onclick事件监听器，当点击它们时，相应的 JavaScript 函数将被激活。
添加样式
为了更轻松地设置元素样式，建议删除所有元素的默认内边距和边距，并将其box-sizing属性设置为border-box。这允许根据元素的尺寸border-box而不是content-box来调整元素的大小。
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
然后添加.slider样式。
.slider {
width: 500px;
height: 300px;
margin: auto;
overflow: hidden;
transform: translateY(50%);
}
以及.slide。
.slide {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
img {
width: 100%;
height: auto;
}
最后，我们还将导航按钮放置在.slider容器的左侧和右侧。
.prev,
.next {
cursor: pointer;
background-color: #333;
color: #fff;
padding: 10px 20px;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-decoration: none;
}
.prev {
left: 0;
}
.next {
right: 0;
}
添加 JavaScript 代码
现在，让我们仔细看看.slide样式。
.slide {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
通过使用position: absolute，我们将所有.slide元素放置在一个位置，彼此堆叠。我们可以使用浏览器中的开发人员工具进行验证。
基于opacity的滑块
现在我们需要做的就是将当前幻灯片的opacity设为100，同时将所有其他幻灯片的opacity设为0。
为了实现幻灯片效果，我们可以编写 JavaScript 代码，以便每当单击导航链接时，“当前幻灯片”都会相应调整。
我们首先将所有幻灯片的opacity设置0。
.slide {
position: absolute;
top: 50%;
transform: translateY(-50%);
opacity: 0;
transition: opacity 1s ease;
}
然后添加以下 JavaScript 代码。
const slides = document.querySelectorAll(".slide");
let currentSlide = 0;
function showSlide(index) {
slides.forEach((slide, i) => {
if (i === index) {
slide.style.opacity = 100;
} else {
slide.style.opacity = 0;
}
});
}
function nextSlide() {
currentSlide = (currentSlide + 1) % slides.length;
showSlide(currentSlide);
}
function prevSlide() {
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
showSlide(currentSlide);
}
showSlide(currentSlide);
第 1 行选择所有.slide，并将它们分配给变量slides。
第 2 行将变量初始化currentSlide为0，它指向图像滑块中的第一张幻灯片。
现在，我们来看看nextSlide()函数。
function nextSlide() {
currentSlide = (currentSlide + 1) % slides.length;
showSlide(currentSlide);
}
在本例中，slides.length给出了滑块中幻灯片的总数，当执行此函数（通过单击链接.next）时，currentSlide将进行相应调整。
例如，当函数第一次执行时，假设总共有 5 张幻灯片：
currentSlide = (0 + 1) % 5 = 1
但当执行第五次时，currentSlide将重置回0。
currentSlide = (4 + 1) % 5 = 0
prevSlide()函数的工作原理类似。
function prevSlide() {
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
showSlide(currentSlide);
}
当currentSlide是4时，它指向第五张幻灯片：
currentSlide = (4 - 1 + 5) % 5 = 3
当currentSlide是0时，它指向第一张幻灯片：
currentSlide = (0 - 1 + 5) % 5 = 4
然后变量currentSlide将作为showSlide()的参数index
function showSlide(index) {
slides.forEach((slide, i) => {
if (i === index) {
slide.style.opacity = 100;
} else {
slide.style.opacity = 0;
}
});
}
此函数迭代存储在slides中的所有幻灯片，如果迭代索引 ( i) 与currentSlide索引 ( index) 匹配，则该幻灯片将被设置opacity为100。如果没有，那opacity就是0。
基于transform
我们将其称为图像滑块，但从最终结果中可以看到，没有太多滑动，因为过渡是基于不透明度的。我们如何调整代码，以便当单击导航链接时，图像实际上滑到下一个？
我们必须进行两项更改。首先，.slide 必须水平排列在.slider容器后面，而不是相互堆叠。我们可以将.slider容器视为一个窗口。每次单击链接时，.slide 都会向左或向右移动以显示上一张或下一张图像。
.slider {
width: 500px;
height: 300px;
margin: auto;
overflow: hidden;
transform: translateY(50%);
display: flex;
align-items: center;
}
.slide {
flex: 0 0 100%;
transition: transform 1s ease;
}
我们使用弹性布局来实现这种效果。flex: 0 0 100%将每个slide的宽度设置为100%。
接下来，调整showSlide()功能。
function showSlide(index) {
slides.forEach((slide, i) => {
const slideWidth = slide.clientWidth;
slide.style.transform = `translateX(-${index * slideWidth}px)`;
});
}
再次假设总共有五张幻灯片，并且每张幻灯片都是500px宽。当索引为3时，index * slideWidth将是1500，并将translateX(-1500px)所有.slide 向左移动1500像素，显示第四个图像。
