原生 JS 图片选择器组件：优化用户交互体验

2023-10-06 19:55:00

引言

在现代网络应用程序中，图像扮演着至关重要的角色，用户经常需要从一组图像中选择或浏览。为了优化这一体验，开发人员需要实现一个高效的图片选择器组件。本文将提供一个使用原生 JS 构建这样的组件的分步指南，重点关注用户交互的便利性和组件的可定制性。

步骤 1：创建基础 HTML 结构

首先，创建一个包含以下 HTML 元素的基本页面结构：

<div class="image-container">
  <ul class="image-list"></ul>
  <div class="controls">
    <button class="prev-btn">&lt;</button>
    <button class="next-btn">&gt;</button>
  </div>
</div>

<div class="image-container"> 容器将包含图片选择器组件。
<ul class="image-list"> 无序列表将用于显示图片缩略图。
<div class="controls"> 包含用于导航图像的按钮。

步骤 2：设置图片列表

接下来，使用 JavaScript 动态填充 <ul class="image-list"> 元素。例如：

const imageList = [
  { src: 'image1.jpg' },
  { src: 'image2.jpg' },
  { src: 'image3.jpg' },
  // ...其他图片
];

const imageListNode = document.querySelector('.image-list');

imageList.forEach((image) => {
  const listItem = document.createElement('li');
  const img = document.createElement('img');
  img.src = image.src;
  listItem.appendChild(img);
  imageListNode.appendChild(listItem);
});

步骤 3：添加导航按钮

下一步，实现用于在图片之间导航的按钮。

const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');

let currentImageIndex = 0;

prevBtn.addEventListener('click', () => {
  if (currentImageIndex > 0) {
    currentImageIndex--;
    updateImage();
  }
});

nextBtn.addEventListener('click', () => {
  if (currentImageIndex < imageList.length - 1) {
    currentImageIndex++;
    updateImage();
  }
});

步骤 4：更新当前图像

最后，创建一个函数来更新当前显示的图像。

const updateImage = () => {
  const currentImage = imageList[currentImageIndex];
  const activeImage = document.querySelector('.image-list li img.active');

  if (activeImage) {
    activeImage.classList.remove('active');
  }

  const newActiveImage = document.querySelector(`.image-list li img[src="${currentImage.src}"]`);
  newActiveImage.classList.add('active');
};