js左右滑动页面代码

以下是用JavaScript实现左右滑动页面的代码：

// 获取页面元素
const slider = document.querySelector('.slider');
const slides = document.querySelectorAll('.slide');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');

// 设置当前活动幻灯片的索引
let currentSlide = 0;

// 显示当前幻灯片
function showSlide() {
  // 隐藏所有幻灯片
  slides.forEach(slide => {
    slide.classList.remove('active');
  });
  // 显示当前幻灯片
  slides[currentSlide].classList.add('active');
}

// 点击“上一个”按钮
prevBtn.addEventListener('click', () => {
  currentSlide--;
  if (currentSlide < 0) {
    currentSlide = slides.length - 1;
  }
  showSlide();
});

// 点击“下一个”按钮
nextBtn.addEventListener('click', () => {
  currentSlide++;
  if (currentSlide > slides.length - 1) {
    currentSlide = 0;
  }
  showSlide();
});

// 监听左右滑动手势
let startX;
let endX;
slider.addEventListener('touchstart', e => {
  startX = e.touches[0].clientX;
});
slider.addEventListener('touchend', e => {
  endX = e.changedTouches[0].clientX;
  if (startX - endX > 50) {
    // 向左滑动
    currentSlide++;
    if (currentSlide > slides.length - 1) {
      currentSlide = 0;
    }
    showSlide();
  } else if (endX - startX > 50) {
    // 向右滑动
    currentSlide--;
    if (currentSlide < 0) {
      currentSlide = slides.length - 1;
    }
    showSlide();
  }
});

需要将 HTML 中的 `.slider` 和 `.slide` 替换为实际的类名。同时，需要在 CSS 中定义 `.slide` 类，使幻灯片处于隐藏状态。