正文

轻松掌握原生JS轮播图制作：实用教程，无需框架，轻松实现图片自动切换

/0 浏览量
0904

在网页设计中，轮播图是一种非常常见且实用的元素，它能够有效地展示多张图片，提升用户体验。今天，我们就来学习如何使用原生JavaScript制作一个简单的轮播图，无需任何框架，实现图片的自动切换。

轮播图的基本结构

首先，我们需要创建轮播图的基本HTML结构。这里，我们将使用一个容器来包裹所有的图片，并为每个图片添加一个“前后”按钮用于切换。

<div id="carousel" class="carousel">
  <div class="carousel-images">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <!-- 更多图片 -->
  </div>
  <button class="prev" onclick="changeSlide(-1)">&#10094;</button>
  <button class="next" onclick="changeSlide(1)">&#10095;</button>
</div>

CSS样式

接下来，我们为轮播图添加一些基本的CSS样式，使其看起来更美观。

.carousel {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.carousel-images img {
  width: 100%;
  display: none;
}

.carousel-images img.active {
  display: block;
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

JavaScript脚本

现在，我们来编写JavaScript代码，实现图片的自动切换功能。

let slideIndex = 0;
showSlides();

function showSlides() {
  let i;
  let slides = document.getElementsByClassName("carousel-images")[0].getElementsByTagName("img");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  slides[slideIndex-1].style.display = "block";
  setTimeout(showSlides, 3000); // Change image every 3 seconds
}

function changeSlide(n) {
  let i;
  let slides = document.getElementsByClassName("carousel-images")[0].getElementsByTagName("img");
  if (slideIndex + n >= slides.length) {slideIndex = 0}
  if (slideIndex + n < 0) {slideIndex = slides.length - 1}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex += n;
  slides[slideIndex].style.display = "block";
}

总结

通过以上步骤，我们就完成了一个简单的原生JS轮播图制作。这个轮播图可以在3秒后自动切换图片，同时也可以通过点击“前后”按钮手动切换图片。

当然，这只是一个基础的轮播图实现。在实际开发中，你可以根据需求添加更多的功能，比如图片标题、指示器、自定义动画等。希望这个教程能帮助你轻松掌握原生JS轮播图制作！

-- 展开阅读全文 --