当前位置：首页 > JavaScript

js实现图片滑动

2026-04-04 01:43:47JavaScript

实现图片滑动的基本思路

图片滑动通常通过CSS和JavaScript结合实现。CSS负责布局和动画效果，JavaScript处理用户交互逻辑。常见的实现方式包括水平滑动轮播、垂直滑动展示等。

水平滑动轮播实现

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: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
}

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

.slide {
  width: 600px;
  height: 400px;
  flex-shrink: 0;
}

JavaScript实现滑动逻辑：

const track = document.querySelector('.slider-track');
const slides = Array.from(document.querySelectorAll('.slide'));
let currentSlide = 0;

function moveToSlide(index) {
  track.style.transform = `translateX(-${index * 600}px)`;
  currentSlide = index;
}

// 自动轮播示例
setInterval(() => {
  currentSlide = (currentSlide + 1) % slides.length;
  moveToSlide(currentSlide);
}, 3000);

触摸滑动支持

添加触摸事件支持可以实现更自然的滑动体验：

let startX = 0;
let currentX = 0;
let isDragging = false;

track.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX;
  currentX = -currentSlide * 600;
  isDragging = true;
});

track.addEventListener('touchmove', (e) => {
  if (!isDragging) return;
  const x = e.touches[0].clientX;
  const diff = x - startX;
  track.style.transform = `translateX(${currentX + diff}px)`;
});

track.addEventListener('touchend', (e) => {
  isDragging = false;
  const x = e.changedTouches[0].clientX;
  const diff = x - startX;

  if (diff > 50 && currentSlide > 0) {
    moveToSlide(currentSlide - 1);
  } else if (diff < -50 && currentSlide < slides.length - 1) {
    moveToSlide(currentSlide + 1);
  } else {
    moveToSlide(currentSlide);
  }
});

无限循环优化

修改moveToSlide函数实现无缝循环：

function moveToSlide(index) {
  if (index < 0) {
    index = slides.length - 1;
  } else if (index >= slides.length) {
    index = 0;
  }

  track.style.transition = 'transform 0.5s ease';
  track.style.transform = `translateX(-${index * 600}px)`;
  currentSlide = index;

  // 重置过渡效果
  setTimeout(() => {
    track.style.transition = 'none';
    if (currentSlide === slides.length - 1) {
      track.style.transform = 'translateX(0)';
      currentSlide = 0;
    } else if (currentSlide === 0) {
      track.style.transform = `translateX(-${(slides.length - 1) * 600}px)`;
      currentSlide = slides.length - 1;
    }
  }, 500);
}

添加导航按钮

可以通过添加按钮增强用户控制：

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

JavaScript添加事件监听：

document.querySelector('.prev-btn').addEventListener('click', () => {
  moveToSlide(currentSlide - 1);
});

document.querySelector('.next-btn').addEventListener('click', () => {
  moveToSlide(currentSlide + 1);
});

响应式设计调整

通过监听窗口大小变化调整滑动距离：

js实现图片滑动

function updateSlideSize() {
  const containerWidth = document.querySelector('.slider-container').offsetWidth;
  document.querySelectorAll('.slide').forEach(slide => {
    slide.style.width = `${containerWidth}px`;
  });
}

window.addEventListener('resize', () => {
  updateSlideSize();
  moveToSlide(currentSlide);
});

// 初始化时调用
updateSlideSize();