js实现滑动相册

实现滑动相册的 JavaScript 方法

使用原生 JavaScript 实现滑动相册可以通过监听触摸事件或鼠标事件来实现。以下是两种常见的实现方式：

HTML 结构

<div class="slider-container">
  <div class="slider-track">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
  </div>
</div>

CSS 样式

.slider-container {
  width: 100%;
  overflow: hidden;
}
.slider-track {
  display: flex;
  transition: transform 0.3s ease;
}
.slide {
  min-width: 100%;
  height: 300px;
}

方法一：使用 transform 实现滑动

const track = document.querySelector('.slider-track');
let currentPosition = 0;
const slideWidth = document.querySelector('.slide').clientWidth;

function moveSlide(direction) {
  const slides = document.querySelectorAll('.slide');
  const maxPosition = -(slides.length - 1) * slideWidth;

  currentPosition += direction * slideWidth;
  currentPosition = Math.max(maxPosition, Math.min(0, currentPosition));

  track.style.transform = `translateX(${currentPosition}px)`;
}

// 添加按钮控制
document.querySelector('.prev-btn').addEventListener('click', () => moveSlide(1));
document.querySelector('.next-btn').addEventListener('click', () => moveSlide(-1));

方法二：触摸滑动实现

const track = document.querySelector('.slider-track');
let startX, moveX, isDragging = false;
let currentTranslate = 0, prevTranslate = 0;

track.addEventListener('mousedown', dragStart);
track.addEventListener('touchstart', dragStart);
track.addEventListener('mouseup', dragEnd);
track.addEventListener('touchend', dragEnd);
track.addEventListener('mousemove', drag);
track.addEventListener('touchmove', drag);

function dragStart(e) {
  isDragging = true;
  startX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX;
  track.style.transition = 'none';
}

function drag(e) {
  if (!isDragging) return;
  const currentX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX;
  moveX = currentX - startX;
  currentTranslate = prevTranslate + moveX;
  track.style.transform = `translateX(${currentTranslate}px)`;
}

function dragEnd() {
  isDragging = false;
  track.style.transition = 'transform 0.3s ease';

  const movedBy = currentTranslate - prevTranslate;
  if (movedBy < -100) {
    prevTranslate -= track.clientWidth;
  } else if (movedBy > 100) {
    prevTranslate += track.clientWidth;
  }

  prevTranslate = Math.max(
    -(track.scrollWidth - track.clientWidth),
    Math.min(0, prevTranslate)
  );

  currentTranslate = prevTranslate;
  track.style.transform = `translateX(${prevTranslate}px)`;
}

方法三：使用 IntersectionObserver 实现自动滑动

const slides = document.querySelectorAll('.slide');
const observerOptions = {
  threshold: 0.5
};

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const currentIndex = Array.from(slides).indexOf(entry.target);
      track.style.transform = `translateX(-${currentIndex * 100}%)`;
    }
  });
}, observerOptions);

slides.forEach(slide => observer.observe(slide));

注意事项

• 确保 CSS 中设置了正确的 flex 布局和过渡效果
• 移动端需要考虑 touch 事件和 preventDefault 防止页面滚动
• 可以添加过渡结束事件处理边界情况
• 性能优化可以考虑 requestAnimationFrame

这些方法可以根据需求组合使用，例如同时支持按钮控制和触摸滑动。实际项目中可能需要添加更多功能如无限循环、自动播放等。