编码大神速成班：手写轮播图+防抖函数，搞定面试难题

2023-06-09 19:40:18

手写代码：程序员成功的关键

在竞争激烈的技术行业中，手写代码的能力已成为衡量程序员综合实力的必备标准。它不仅考察了你对编程语言的熟练程度，还检验了你的编程逻辑和问题解决能力。如果你渴望在求职和职业生涯中取得成功，掌握手写代码技巧至关重要。

轮播图的巧妙设计

轮播图是现代网站上常见的交互元素，展示了一系列图片或内容，实现自动轮播。手写轮播图是一个出色的练习，可以帮助你加深对 HTML、CSS 和 JavaScript 的理解。

以下是分步指南：

HTML：

<div class="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>

CSS：

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

.carousel ul {
  width: 100%;
  height: 100%;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.carousel li {
  width: 100%;
  height: 100%;
  float: left;
}

.carousel li img {
  width: 100%;
  height: 100%;
}

JavaScript：

// 获取轮播图元素
const carousel = document.querySelector('.carousel');

// 获取轮播图列表元素
const carouselList = carousel.querySelector('ul');

// 获取轮播图列表项元素
const carouselItems = carouselList.querySelectorAll('li');

// 获取轮播图列表项数量
const carouselItemCount = carouselItems.length;

// 当前显示的轮播图列表项索引
let currentCarouselItemIndex = 0;

// 轮播图自动播放函数
function carouselAutoplay() {
  // 清除定时器
  clearTimeout(carouselTimer);

  // 递增当前显示的轮播图列表项索引
  currentCarouselItemIndex = (currentCarouselItemIndex + 1) % carouselItemCount;

  // 设置当前显示的轮播图列表项
  carouselList.style.transform = `translateX(-${currentCarouselItemIndex * 100}%)`;

  // 创建新的定时器
  carouselTimer = setTimeout(carouselAutoplay, 3000);
}

// 启动轮播图自动播放
carouselAutoplay();

防抖函数：防止重复调用

防抖函数是一种优化技巧，用于防止函数在短时间内被多次调用。它通常用于处理用户输入事件，例如键盘输入或鼠标点击。通过防抖，你可以提高程序的响应速度和效率。

以下是分步指南：

function debounce(fn, wait) {
  let timeout = null;

  return function () {
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(() => {
      fn.apply(this, arguments);
    }, wait);
  };
}