JS零基础实现轮播图，新手小白也能轻松学会

2023-06-04 13:38:23

使用 JavaScript 打造令人印象深刻的轮播图

在现代网页设计中，轮播图已成为不可或缺的元素，它能提升视觉吸引力并增强用户体验。凭借其多功能性，轮播图可用于在网站主页或产品页面展示一系列图片。要创建令人惊叹的轮播图，JavaScript 是一种理想的选择，它能为您的网页元素注入交互性和动态性。

1. 构建轮播图容器

踏上创建轮播图之旅的第一步是建立一个容器，该容器将容纳轮播图中的图片。此容器通常是一个 div 或 ul 元素，负责定义轮播图的尺寸和位置。

<div id="carousel">
  <ul>
    <li><img src="image1.jpg" alt="Image 1"></li>
    <li><img src="image2.jpg" alt="Image 2"></li>
    <li><img src="image3.jpg" alt="Image 3"></li>
  </ul>
</div>

2. 添加导航按钮

为了让用户轻松浏览轮播图中的图片，需要添加导航按钮。这些按钮通常以箭头或标签的形式出现，位于轮播图的边缘。使用 a 或 button 元素创建这些按钮，为其指定 href 属性或事件监听器以实现导航功能。

<a id="prev" href="#">&laquo;</a>
<a id="next" href="#">&raquo;</a>

3. 编写样式

通过精心设计的样式表，为轮播图和导航按钮增添美观性。您可以将样式放入单独的 CSS 文件或直接嵌入 HTML 代码中。样式属性包括定义轮播图容器的尺寸、图片的排列方式以及导航按钮的外观和位置。

#carousel {
  width: 100%;
  height: 400px;
  overflow: hidden;
}

#carousel ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  list-style: none;
}

#carousel li {
  width: 100%;
  height: 100%;
}

#carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#prev, #next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
}

#prev {
  left: 0;
}

#next {
  right: 0;
}

4. 实现 JavaScript 交互

现在，轮到 JavaScript 发挥它的魔力，为轮播图注入交互性。利用事件监听器和样式操作，您可以让轮播图响应用户交互。以下是必要的 JavaScript 代码：

const carousel = document.getElementById('carousel');
const prev = document.getElementById('prev');
const next = document.getElementById('next');

let currentSlide = 0;

prev.addEventListener('click', () => {
  currentSlide--;
  if (currentSlide < 0) {
    currentSlide = carousel.children.length - 1;
  }
  carousel.style.transform = `translateX(-${currentSlide * 100}%)`;
});

next.addEventListener('click', () => {
  currentSlide++;
  if (currentSlide >= carousel.children.length) {
    currentSlide = 0;
  }
  carousel.style.transform = `translateX(-${currentSlide * 100}%)`;
});