用JS实现橱窗相册，搞定触摸滑动与单击效果

前端

2023-09-17 10:12:45

打造炫酷橱窗相册：让您的图片脱颖而出

引言：

在当今快节奏的数字世界中，视觉冲击已成为至关重要的要素。橱窗相册作为展示图片的流行方式，已成为网站和应用程序的必备元素。一个设计精良、交互友好的橱窗相册可以显著提升用户体验，让您的平台在竞争中脱颖而出。

本指南将深入探究如何使用 JavaScript 构建一个功能齐全的橱窗相册，为您提供实现以下特性的实用步骤：

点击居中： 用户可点击任何图片将其居中显示。
左右滑动： 使用手指左右滑动可浏览不同图片。
隐藏超出范围的橱窗： 当橱窗移动到可视范围之外时，将其隐藏以优化页面布局。
批量移动： 通过点击最左侧或最右侧的箭头，可批量移动多个橱窗。当滚动到头时，箭头将变为禁用状态。

实现步骤：

1. HTML 结构

<div class="showcase-container">
  <div class="showcase-wrapper">
    <div class="showcase-item">
      <img src="image1.jpg" alt="Image 1" />
    </div>
    <div class="showcase-item">
      <img src="image2.jpg" alt="Image 2" />
    </div>
    <div class="showcase-item">
      <img src="image3.jpg" alt="Image 3" />
    </div>
    ...
  </div>
</div>

2. CSS 样式

.showcase-container {
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.showcase-wrapper {
  display: flex;
  flex-direction: row;
  transition: transform 0.5s ease-in-out;
}

.showcase-item {
  flex: 1 0 auto;
  width: 200px;
  height: 200px;
  margin: 0 10px;
  overflow: hidden;
}

.showcase-item img {
  object-fit: contain;
}

3. JavaScript 代码

// 获取 DOM 元素
const showcaseContainer = document.querySelector('.showcase-container');
const showcaseWrapper = document.querySelector('.showcase-wrapper');
const showcaseItems = document.querySelectorAll('.showcase-item');

// 初始化变量
let currentPosition = 0;
let itemWidth = showcaseItems[0].offsetWidth + 20;

// 添加点击居中事件监听器
showcaseContainer.addEventListener('click', (e) => {
  if (e.target.classList.contains('showcase-item')) {
    const itemIndex = Array.from(showcaseItems).indexOf(e.target);
    currentPosition = -itemIndex * itemWidth;
    showcaseWrapper.style.transform = `translateX(${currentPosition}px)`;
  }
});

// 添加左右滑动事件监听器
const prevArrow = document.querySelector('.prev-arrow');
const nextArrow = document.querySelector('.next-arrow');

prevArrow.addEventListener('click', () => {
  if (currentPosition < 0) {
    currentPosition += itemWidth;
    showcaseWrapper.style.transform = `translateX(${currentPosition}px)`;
  }
});

nextArrow.addEventListener('click', () => {
  if (currentPosition > -(showcaseItems.length - 6) * itemWidth) {
    currentPosition -= itemWidth;
    showcaseWrapper.style.transform = `translateX(${currentPosition}px)`;
  }
});

代码示例：

<!-- HTML 结构 -->
<div class="showcase-container">
  <div class="showcase-wrapper">
    <div class="showcase-item">
      <img src="image1.jpg" alt="Image 1" />
    </div>
    <div class="showcase-item">
      <img src="image2.jpg" alt="Image 2" />
    </div>
    <div class="showcase-item">
      <img src="image3.jpg" alt="Image 3" />
    </div>
    ...
  </div>
</div>

<!-- CSS 样式 -->
<style>
  .showcase-container {
    width: 100%;
    height: 400px;
    overflow: hidden;
  }

  .showcase-wrapper {
    display: flex;
    flex-direction: row;
    transition: transform 0.5s ease-in-out;
  }

  .showcase-item {
    flex: 1 0 auto;
    width: 200px;
    height: 200px;
    margin: 0 10px;
    overflow: hidden;
  }

  .showcase-item img {
    object-fit: contain;
  }
</style>

<!-- JavaScript 代码 -->
<script>
  // 获取 DOM 元素
  const showcaseContainer = document.querySelector('.showcase-container');
  const showcaseWrapper = document.querySelector('.showcase-wrapper');
  const showcaseItems = document.querySelectorAll('.showcase-item');

  // 初始化变量
  let currentPosition = 0;
  let itemWidth = showcaseItems[0].offsetWidth + 20;

  // 添加点击居中事件监听器
  showcaseContainer.addEventListener('click', (e) => {
    if (e.target.classList.contains('showcase-item')) {
      const itemIndex = Array.from(showcaseItems).indexOf(e.target);
      currentPosition = -itemIndex * itemWidth;
      showcaseWrapper.style.transform = `translateX(${currentPosition}px)`;
    }
  });

  // 添加左右滑动事件监听器
  const prevArrow = document.querySelector('.prev-arrow');
  const nextArrow = document.querySelector('.next-arrow');

  prevArrow.addEventListener('click', () => {
    if (currentPosition < 0) {
      currentPosition += itemWidth;
      showcaseWrapper.style.transform = `translateX(${currentPosition}px)`;
    }
  });

  nextArrow.addEventListener('click', () => {
    if (currentPosition > -(showcaseItems.length - 6) * itemWidth) {
      currentPosition -= itemWidth;
      showcaseWrapper.style.transform = `translateX(${currentPosition}px)`;
    }
  });
</script>