为什么轮播图这么常见？从一个面试题讲透轮播图原理

前端

2024-01-16 13:03:12

这几年大环境不太好，前端面试难度也呈现了指数级增长，面试官一上来就让我手撕这，手撕那。我tm手撕你吧。

我一天没事干去某牛招聘网站上看面筋，意外发现一个应届生吐槽面试官让他手撕轮播图。我顿时一惊，轮播图这种玩意儿还需要手撕吗？

抱着好奇心，我点开了那个帖子。原来，面试官让那个应届生手撕轮播图，并不是让他从零开始写代码，而是让他根据一个简单的 HTML 结构，实现轮播图的效果。

说实话，这个要求并不算过分。轮播图的原理并不复杂，实现起来也并不困难。但对于一个应届生来说，可能还是有点挑战。

于是我决定写一篇文章，从一个面試題入手，講解輪播圖的原理和實現方法，並介紹一些輪播圖的最佳實踐。

轮播图的原理

轮播图的原理很简单，就是在一定时间间隔内，自动切换显示不同的图片或内容。

实现轮播图的方法有很多种，最常见的方法有两种：

定时器方法： 这种方法利用定时器来控制图片或内容的切换。每隔一定时间，定时器就会触发一个事件，然后根据事件来切换图片或内容。
CSS3 动画方法： 这种方法利用 CSS3 的动画特性来实现轮播图的效果。通过设置不同的动画效果和时间间隔，可以实现不同的轮播图效果。

实现轮播图

下面我们来演示如何使用定时器方法和 CSS3 动画方法来实现轮播图。

定时器方法

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

const carousel = document.getElementById('carousel');
const images = carousel.querySelectorAll('img');
let currentImageIndex = 0;

function showImage() {
  images[currentImageIndex].style.display = 'block';

  setTimeout(() => {
    images[currentImageIndex].style.display = 'none';
    currentImageIndex++;

    if (currentImageIndex >= images.length) {
      currentImageIndex = 0;
    }

    showImage();
  }, 3000);
}

showImage();

CSS3 动画方法

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

#carousel {
  position: relative;
  width: 100%;
  height: 300px;
}

#carousel img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

#carousel img:first-child {
  opacity: 1;
}

#carousel img:nth-child(2) {
  animation: slideInLeft 1s ease-in-out forwards;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

#carousel img:nth-child(3) {
  animation: slideInRight 1s ease-in-out forwards;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}