如何使用 HTML CSS 和 JavaScript 创建图像滑块？

在本文中，我们将使用 HTML、CSS 和 JavaScript 创建一个图像滑块，

HTML 和 CSS 使用五个 HTML div、左箭头、三个幻灯片和右箭头来设计 HTML 页面，这些 id 或类为箭头左、幻灯片 1、幻灯片 2、幻灯片 3 和箭头右。通过单击这些箭头，我们可以使用用户定义的 JavaScript 函数（如 slideLeft() 和 slideRight()）查看这些图像幻灯片。这些函数使用JavaScript 中的 addEventListener()方法来监听箭头的点击事件。

示例： HTML 部分：此部分包含页面的 HTML 部分。必须显示的幻灯片使用相应的文本进行定义。

index.html

  

    
    
    Image Slider
    
    
    
    
    
    

  

    
    
    
    
    

  

CSS 部分：此部分包含用于制作幻灯片的所有样式。用于移动每张幻灯片的左右箭头是通过根据每张幻灯片的需要设置 margin-left 和 margin-right 属性来定义的。这使它具有图像滑块的外观。所有幻灯片都将 background-image 作为滑块中使用的图像的 URL。以下代码是上述 HTML 代码中使用的文件“style.css”的内容。

样式文件

.slide {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
  
.slide1 {
  background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20210812221217/pic1.png");
}
.slide2 {
  background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20210812221254/pic2.png");
}
.slide3 {
  background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20210812221322/pic3.png");
}
.arrow {
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin-top: -35px;
  width: 0;
  height: 0;
  border-style: solid;
}
#arrow-left {
  border-width: 20px 30px 20px 0;
  border-color: transparent #fff transparent transparent;
  left: 0;
  margin-left: 20px;
}
  
#arrow-right {
  border-width: 20px 0 20px 30px;
  border-color: transparent transparent transparent #fff;
  right: 0;
  margin-right: 20px;
}

JavaScript 部分：此部分处理用户定义的 JavaScript 函数，如slideLeft()和slideRight()。这些函数使用JavaScript 中的 addEventListener()方法，该方法接受箭头的点击事件来侦听。 以下代码是上述 HTML 代码中使用的文件“script.js”的内容。

主文件

let sliderImages = document.querySelectorAll(".slide"),
  arrowLeft = document.querySelector("#arrow-left"),
  arrowRight = document.querySelector("#arrow-right"),
  current = 0;
  
// Clear all images
function reset() {
  for (let i = 0; i < sliderImages.length; i++) {
    sliderImages[i].style.display = "none";
  }
}
  
// Initial slide
function startSlide() {
  reset();
  sliderImages[0].style.display = "block";
}
  
// Show previous
function slideLeft() {
  reset();
  sliderImages[current - 1].style.display = "block";
  current--;
}
  
// Show next
function slideRight() {
  reset();
  sliderImages[current + 1].style.display = "block";
  current++;
}
  
// Left arrow click
arrowLeft.addEventListener("click", function () {
  if (current === 0) {
    current = sliderImages.length;
  }
  slideLeft();
});
  
// Right arrow click
arrowRight.addEventListener("click", function () {
  if (current === sliderImages.length - 1) {
    current = -1;
  }
  slideRight();
});
  
startSlide();

输出：

图像滑块