使用 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像素,显示第四个图像。