如何使用JavaScript创建图像滑块以增强您的网站
你是否曾经遇到过这样的情况：你想在网页的某个部分显示多个图片/视频，但又不想占用太多空间？你想为你的网页添加互动性或使它们更具吸引力吗？图像滑块可以帮你解决这个问题。在本文中，我们将定义图像滑块的先决条件以及如何使用HTML、JavaScript和CSS创建一个图像滑块。
什么是图像滑块？
滑块通常是一个轮播文本、图像或视频的展示工具。本文将重点介绍图像滑块。大多数网页开发者使用滑块在主页上展示促销信息或最重要的信息。
以下是你应该在网页上使用滑块的一些原因：
- 提高用户体验：一个理想的网页应该是紧凑的，这样用户就不必不断滚动来获取重要数据。如果你有多张图片，你可以通过在滑块中展示它们来省去用户滚动的麻烦。
- 视觉吸引力：大多数网站用户不会在一个简单的网页上花费太多时间。你可以通过滑块和动画来提高视觉吸引力。
- 节省空间：如果你想在网页上展示20张图片，它们可能会占用大量空间。创建一个滑块将允许你节省空间，同时仍允许用户访问其中所有图片。
- 显示动态内容：你可以使用滑块来展示社交媒体嵌入、博客和新闻等动态内容。
创建图像滑块的先决条件
- 基本的HTML理解：我们将在这里描述滑块的结构。你应该熟悉各种HTML标签、类和div。
- 基本的CSS理解：我们将使用CSS来为图像滑块和按钮设置样式。
- 基本的JavaScript理解：我们将使用JavaScript使图像滑块具有响应性。
- 代码编辑器：你可以使用你喜欢的代码编辑器。我将使用Visual Studio Code。
- 一组图片。
设置项目文件夹
我们需要一个项目文件夹，其中包含一个名为“Images”的文件夹以及HTML、CSS和JavaScript文件。我将把我的项目命名为“Image-Slider”。你可以手动创建你的项目，也可以使用以下命令开始；
mkdir Image-Slider
cd Image-Slider
mkdir Images && touch index.html styles.css script.js
将所有图片添加到我们在项目文件夹中创建的“Images”文件夹中，并进入下一步。
这是我的项目文件夹，我已经添加了六张图片，我将使用它们来创建一个滑块。我们的所有HTML代码将在index.html文件中。
图像滑块的类型
我们可以有两种类型的图像滑块：自动滑块和带有按钮的自动图像滑块。
#1. 自动图像滑块
自动滑块在给定的时间（例如3秒）之后自动滚动到下一张图片。
HTML代码
这是我的HTML代码：
文档
非洲
美洲
亚洲
阿拉伯
现代
欧洲
从这段代码可以注意到以下几点：
- 我在
部分将CSS文件导入到了index.html中。这将在后续步骤中使用。
- 我在HTML代码的结束标签
之前添加了JavaScript。我将使用JavaScript为滑块添加功能。 - 每个滑块都有一个
class为slide。 - 我使用
使用CSS样式自动设置图像滑块
现在我们已经链接了CSS和HTML文件，我们可以对图像进行样式设置。
将以下代码添加到CSS文件中：
#slider {
width: 80%;
}
.slide {
width: 80%;
display: none;
position: relative;
}
.slide img {
width: 80%;
height: 80%;
}
.slide.active {
display: block;
}
从这段代码可以注意到以下几点：
- 我们将滑块的宽度和高度设置为80%。
- 我们将活动滑块设置为
block，这意味着只有活动滑块会显示，其他滑块将被隐藏。
如何添加JavaScript使图像滑块具有响应性
将以下代码添加到script.js文件中：
var slides = document.querySelectorAll('.slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);
function nextSlide() {
slides[currentSlide].className = 'slide';
currentSlide = (currentSlide+1)%slides.length;
slides[currentSlide].className = 'slide active';
}
这段JavaScript代码的作用如下：
- 我们使用
document.querySelectorAll选择器来选择所有class为slide的元素。 - 我们将当前滑块的初始值设置为0。
- 我们将
slideInterval设置为2000（2秒），这意味着图像滑块每2秒更改一次。 - 此代码
slides[currentSlide].className = 'slide';从当前滑块中移除active类。 - 此代码
currentSlide = (currentSlide + 1) % slides.length;递增当前滑块索引。 - 此代码
slides[currentSlide].className = 'slide active';向当前滑块添加active类。
自动滑块的工作原理如下：
#2. 带按钮的自动滑块
我们创建的图像滑块每2秒自动滚动一次。现在，我们可以创建一个图像，在用户点击按钮后可以切换到下一张幻灯片，如果用户不点击按钮，则每3秒自动滚动一次。
HTML代码
您可以按照以下方式更改index.html文件的内容：
图片轮播
❮
❯
这段HTML代码的功能如下：
- 我们有一个名为
mySlides的类，其中包含五个图片。 - 我们有两个按钮，“prev”和“next”，带有
onClick，允许用户浏览幻灯片。 - 我们在网页底部显示缩略图。
CSS代码
将以下代码添加到您的代码中：
* {
box-sizing: border-box;
}
.container {
position: relative;
}
.mySlides {
justify-content: center;
}
.cursor {
cursor: pointer;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: rgb(34, 143, 85);
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.caption-container {
text-align: center;
background-color: orangered;
padding: 2px 16px;
color: white;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 16.66%;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
CSS代码的功能如下：
- 我们将
.mySlides类的显示属性设置为none，这意味着默认情况下所有幻灯片都是隐藏的。 - 我们通过
active, .demo:hover {opacity: 1;}规则将缩略图的鼠标悬停时的不透明度设置为1。
JavaScript代码
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
let slideInterval = setInterval(() => {
plusSlides(1);
}, 3000);
let slideshowContainer = document.getElementsByClassName('slideshow-container')[0];
slideshowContainer.addEventListener('mouseenter', () => {
clearInterval(slideInterval);
});
slideshowContainer.addEventListener('mouseleave', () => {
slideInterval = setInterval(() => {
plusSlides(1);
}, 3000);
});
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("demo");
let captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
您可以在此处获得最终的源代码here。
我们的JavaScript代码执行以下操作；
- 我们有一个
currentSlide函数，其中显示值设置为none。此规则允许我们的网页仅显示当前幻灯片。 - 我们有一个
plusSlides函数，它从slideIndex中加/减给定值，以确定要显示的幻灯片。 - 如果用户不点击按钮，则幻灯片将在每3000毫秒后自动滚动。
如果用户使用导航标签，我们的图像滑块将按以下方式工作；
如果用户不使用导航按钮，则图像滑块将在每3秒后自动滚动，如下所示；
测试和调试图像滑块
错误是开发者旅程的一部分，而在代码中出现错误并不意味着您是一个糟糕的开发者。如果在按照上述步骤后您的代码仍然无效，您可以尝试以下测试和调试选项来修复错误：
- 单独调试每个文件：我们的代码有三个文件，HTML、CSS和JavaScript文件。这三种语言有不同的规则。您可以使用诸如W3C Markup Validation Service用于HTML、CSS Validator用于CSS代码和Chrome DevTools用于测试JavaScript代码的工具来检查您的HTML、CSS和JavaScript代码是否有效。
- 执行不同类型的测试：您可以进行视觉测试以确保图像正确显示，性能测试以检查图像是否响应，以及功能测试以确保图像可导航。
- 使用不同的图像格式和大小进行测试：一个好的图像滑块应该能够适应不同的图像格式和大小。
- 自动化您的测试：自动化无处不在，您也可以从中受益。您可以使用诸如Selenium或LoadRunner的工具来编写和执行测试自动化脚本。这些工具还允许您重用一些测试。
- 记录您的测试：测试是一个持续的过程。您可能不得不不断改进您的测试，直到您的代码按预期工作。记录这个过程可以使您的代码可读性强，易于参考。
图像滑块：最佳实践
- 保持简单：滑块很吸引人。然而，将滑块中的图像数量保持较低。每个幻灯片中有4-7张图像是理想的。
- 测试您的滑块：在发布之前对其进行功能测试。
- 创建响应式滑块：确保您创建的滑块对不同的屏幕尺寸都是响应式的。
- 使用高质量的图像：为您的滑块拍摄/下载高质量图像。将图像保存为SVG格式是一种很棒的方法，因为在调整大小时它们不会失去质量。
- 调整图像大小：您可能有不同的图像尺寸和格式。始终确保滑块中的图像大小相同。您可以通过CSS实现这一点。
总结
我们希望您现在可以创建一个完全功能的图像滑块，在不使用UI frameworks的情况下显示网站上的重要数据。您可以使用相同的方法在网页上创建视频滑块。
