如何使用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。
  • 我使用标签从Images文件夹中导入图像。

使用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的情况下显示网站上的重要数据。您可以使用相同的方法在网页上创建视频滑块。

姚伟斌

程序猿

我是姚伟斌，也被称为文景。我的专业领域涵盖了开放源代码的深度探索、网络编程和网络建站。我热衷于分享我的编程和建站实践经验，尤其擅长于Nginx和Proxy服务器的管理。此外，我还对Python和NodeJS这两种编程语言有着深刻的理解和独到的见解。

最近，我致力于爬虫技术的研究，探索如何通过高效的数据抓取为项目增添价值。我的目标是通过持续的学习和创新，为开放源代码社区贡献我的力量，并帮助那些对网络编程和网站建设感兴趣的人士。

类似文章