手撕轮播图，你不学真的会后悔的！

2024-01-13 17:41:22

在前端开发中，轮播图是一种常见的交互元素，它可以用来展示产品图片、新闻资讯、广告宣传等内容。手撕轮播图，是指通过纯JavaScript、HTML和CSS代码来实现轮播图的功能，而不需要借助任何第三方库或框架。

手撕轮播图虽然看起来复杂，但其实原理并不难理解。它主要包括以下几个步骤：

准备HTML结构：创建一个包含轮播图的父容器，并在其中添加多个子容器，每个子容器对应一张轮播图片。
添加CSS样式：为轮播图容器和子容器设置样式，包括尺寸、位置、背景图片等。
实现JavaScript逻辑：使用JavaScript来控制轮播图的切换，包括轮播的间隔时间、切换动画效果、手动切换按钮等。

下面，我们来看一个具体的手撕轮播图代码示例：

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

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

.item {
  float: left;
  width: 100%;
  height: 100%;
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.active {
  display: block;
}

.inactive {
  display: none;
}

const carousel = document.getElementById('carousel');
const items = carousel.querySelectorAll('.item');
let activeIndex = 0;

// 轮播间隔时间
const interval = 3000;

// 切换轮播图
function switchItem() {
  items[activeIndex].classList.remove('active');
  items[activeIndex].classList.add('inactive');

  activeIndex = (activeIndex + 1) % items.length;

  items[activeIndex].classList.remove('inactive');
  items[activeIndex].classList.add('active');
}

// 定时切换轮播图
setInterval(switchItem, interval);