js左右滑动切换页面带上动画

可以使用 JavaScript 来实现左右滑动切换页面的功能。首先，需要监听触摸事件或鼠标事件，并在事件回调函数中记录起始位置和结束位置的坐标。然后根据这些坐标的差值来判断是否触发页面切换。

在页面切换时，可以使用 CSS 的动画效果来实现动画效果。例如，可以在当前页面上添加类名来设置过渡效果，或者使用 JavaScript 动画库，如 animate.css 来实现动画效果。

这里给出一个示例代码：

HTML:

<div id="container">
  <div class="page current">Page 1</div>
  <div class="page">Page 2</div>
  <div class="page">Page 3</div>
</div>

CSS:

.page {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.3s;
}
.page.prev {
  transform: translateX(-100%);
}
.page.next {
  transform: translateX(100%);
}

JS:

const container = document.getElementById('container');
const pages = document.querySelectorAll('.page');
let startX;

container.addEventListener('touchstart', e => {
  startX = e.touches[0].clientX;
});

container.addEventListener('touchend', e => {
  const distance = e.changedTouches[0].clientX - startX;
  if (distance > 50) {
    prevPage();
  } else if (distance < -50) {
    nextPage();
  }
});

function prevPage() {
  const currentPage = document.querySelector('.current');
  if (currentPage.previousElementSibling) {
    currentPage.classList.add('prev');
    currentPage.classList.remove('current');
    currentPage.previousElementSibling.classList.add('current');
  }
}

function nextPage() {
  const currentPage = document.querySelector('.current');