当前位置：首页 > JavaScript

js实现滑动相册

2026-01-31 00:18:09JavaScript

js实现滑动相册

实现滑动相册的基本思路

滑动相册的核心是通过监听用户触摸或鼠标事件，动态调整图片的位置。通常结合CSS过渡或动画效果实现平滑滑动。

HTML结构

<div class="slider-container">
  <div class="slider-track">
    <img src="image1.jpg" class="slide">
    <img src="image2.jpg" class="slide">
    <img src="image3.jpg" class="slide">
  </div>
</div>

CSS样式

.slider-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.slider-track {
  display: flex;
  transition: transform 0.5s ease;
}

.slide {
  min-width: 100%;
  height: 300px;
  object-fit: cover;
}

JavaScript实现

const track = document.querySelector('.slider-track');
const slides = Array.from(document.querySelectorAll('.slide'));
const slideWidth = slides[0].getBoundingClientRect().width;

let currentIndex = 0;
let isDragging = false;
let startPos = 0;
let currentTranslate = 0;
let prevTranslate = 0;

// 设置初始位置
setSliderPosition();

// 触摸事件处理
track.addEventListener('touchstart', touchStart);
track.addEventListener('touchmove', touchMove);
track.addEventListener('touchend', touchEnd);

// 鼠标事件处理
track.addEventListener('mousedown', touchStart);
track.addEventListener('mousemove', touchMove);
track.addEventListener('mouseup', touchEnd);
track.addEventListener('mouseleave', touchEnd);

function touchStart(e) {
  isDragging = true;
  startPos = getPositionX(e);
  prevTranslate = currentTranslate;
  track.style.transition = 'none';
}

function touchMove(e) {
  if (!isDragging) return;
  const currentPosition = getPositionX(e);
  currentTranslate = prevTranslate + currentPosition - startPos;
  track.style.transform = `translateX(${currentTranslate}px)`;
}

function touchEnd() {
  isDragging = false;
  const movedBy = currentTranslate - prevTranslate;

  if (movedBy < -100 && currentIndex < slides.length - 1) {
    currentIndex += 1;
  }

  if (movedBy > 100 && currentIndex > 0) {
    currentIndex -= 1;
  }

  setSliderPosition();
}

function getPositionX(e) {
  return e.type.includes('mouse') ? e.pageX : e.touches[0].clientX;
}

function setSliderPosition() {
  currentTranslate = currentIndex * -slideWidth;
  track.style.transition = 'transform 0.5s ease';
  track.style.transform = `translateX(${currentTranslate}px)`;
}

自动轮播功能

let autoSlideInterval;

function startAutoSlide() {
  autoSlideInterval = setInterval(() => {
    currentIndex = (currentIndex + 1) % slides.length;
    setSliderPosition();
  }, 3000);
}

function stopAutoSlide() {
  clearInterval(autoSlideInterval);
}

// 开始自动轮播
startAutoSlide();

// 鼠标悬停时停止
track.addEventListener('mouseenter', stopAutoSlide);
track.addEventListener('mouseleave', startAutoSlide);

响应式处理

window.addEventListener('resize', () => {
  slideWidth = slides[0].getBoundingClientRect().width;
  setSliderPosition();
});

添加导航按钮

<button class="prev-btn">Previous</button>
<button class="next-btn">Next</button>

document.querySelector('.prev-btn').addEventListener('click', () => {
  currentIndex = Math.max(currentIndex - 1, 0);
  setSliderPosition();
});

document.querySelector('.next-btn').addEventListener('click', () => {
  currentIndex = Math.min(currentIndex + 1, slides.length - 1);
  setSliderPosition();
});

指示器实现

<div class="indicators"></div>

const indicators = document.querySelector('.indicators');

// 创建指示器
slides.forEach((_, i) => {
  const indicator = document.createElement('div');
  indicator.classList.add('indicator');
  if (i === 0) indicator.classList.add('active');
  indicator.addEventListener('click', () => {
    currentIndex = i;
    setSliderPosition();
    updateIndicators();
  });
  indicators.appendChild(indicator);
});

function updateIndicators() {
  document.querySelectorAll('.indicator').forEach((indicator, i) => {
    indicator.classList.toggle('active', i === currentIndex);
  });
}

这个实现包含了基本的滑动功能、自动轮播、导航按钮和指示器。可以根据实际需求调整过渡效果、滑动阈值和响应式行为。