手撕轮播图，你还在等什么？

前端

2024-01-07 22:31:19

手撕轮播图，酷炫前沿的前端技术

身为前端开发工程师，如果你还不熟悉手撕轮播图，那么你可能会落伍了！

轮播图作为网页设计的宠儿，以其炫酷的视觉效果和简洁易用的特性，成为各大网站的标配。市面上虽然琳琅满目的轮播图框架和组件，但亲自动手实现一个轮播图，不仅能让你深入理解其工作原理，还能锻炼你的编程能力。

准备工作

开始之前，你需要准备以下工具：

文本编辑器
浏览器
HTML、CSS 和 JavaScript 基础

代码实现

下面我们就一步步来实现一个手撕轮播图：

HTML 结构

首先，创建一个 HTML 文件，添加如下代码：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div id="carousel">
    <img src="image1.jpg" alt="图片1">
    <img src="image2.jpg" alt="图片2">
    <img src="image3.jpg" alt="图片3">
  </div>
</body>
</html>

这段代码创建了一个包含三个图片的轮播图结构。

CSS 样式

接下来，使用 CSS 美化轮播图：

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

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

这些样式设置了轮播图的大小，隐藏了溢出内容，并确保图片能完全填充轮播图。

JavaScript 代码

最后，用 JavaScript 实现轮播图功能：

const carousel = document.getElementById('carousel');
const images = carousel.getElementsByTagName('img');
let currentIndex = 0;

function showImage(index) {
  for (let i = 0; i < images.length; i++) {
    images[i].style.display = 'none';
  }

  images[index].style.display = 'block';
}

function nextImage() {
  currentIndex++;
  if (currentIndex >= images.length) {
    currentIndex = 0;
  }

  showImage(currentIndex);
}

function previousImage() {
  currentIndex--;
  if (currentIndex < 0) {
    currentIndex = images.length - 1;
  }

  showImage(currentIndex);
}

setInterval(nextImage, 3000);