js实现图片滑动

图片滑动实现方法

使用CSS和JavaScript实现横向滑动

通过CSS设置容器为横向滚动，JavaScript监听触摸事件实现滑动效果。

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

.slider-container {
  width: 100%;
  overflow-x: scroll;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
}

.slider-track {
  display: inline-block;
}

.slider-track img {
  width: 300px;
  height: 200px;
  object-fit: cover;
  scroll-snap-align: start;
  margin-right: 10px;
}

const slider = document.querySelector('.slider-container');
let isDown = false;
let startX;
let scrollLeft;

slider.addEventListener('mousedown', (e) => {
  isDown = true;
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
});

slider.addEventListener('mouseleave', () => {
  isDown = false;
});

slider.addEventListener('mouseup', () => {
  isDown = false;
});

slider.addEventListener('mousemove', (e) => {
  if(!isDown) return;
  e.preventDefault();
  const x = e.pageX - slider.offsetLeft;
  const walk = (x - startX) * 2;
  slider.scrollLeft = scrollLeft - walk;
});

使用Swiper.js库实现

Swiper.js是专业的滑动库，提供丰富的配置选项。

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="image1.jpg"></div>
    <div class="swiper-slide"><img src="image2.jpg"></div>
    <div class="swiper-slide"><img src="image3.jpg"></div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

import Swiper from 'https://unpkg.com/swiper/swiper-bundle.esm.browser.min.js'

const swiper = new Swiper('.swiper', {
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

使用CSS Scroll Snap实现纯CSS方案

现代浏览器支持的原生滑动方案，无需JavaScript。

<div class="gallery">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>

.gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(100% - 1rem);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 1rem;
}

.gallery img {
  scroll-snap-align: start;
  width: 100%;
  height: 300px;
  object-fit: cover;
}

响应式滑动实现

结合媒体查询实现不同屏幕尺寸下的滑动效果。

@media (max-width: 768px) {
  .slider-container {
    -webkit-overflow-scrolling: touch;
  }

  .slider-track img {
    width: 80vw;
  }
}

window.addEventListener('resize', () => {
  const windowWidth = window.innerWidth;
  const images = document.querySelectorAll('.slider-track img');

  images.forEach(img => {
    img.style.width = windowWidth < 768 ? '80vw' : '300px';
  });
});