如何用动画实现swiper的无限循环滚动，不使用swiper组件

要实现在纯JavaScript环境下模拟Swiper的无限循环滚动效果，我们可以通过监听滑动结束事件并在适当的时候将元素向相反方向移动来实现。

首先，我们需要创建一个包含若干个元素的容器，比如图片、卡片等，然后编写相关的HTML结构：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <!-- 添加多个项目 -->
    <div class="swiper-slide">项目1</div>
    <div class="swiper-slide">项目2</div>
    <div class="swiper-slide">项目3</div>
    <!-- 更多项目... -->
  </div>
</div>

接下来，利用CSS样式来设置宽度和布局，使其看起来像是无限滚动：

.swiper-container {
  overflow: hidden;
}

.swiper-slide {
  width: 100%;
}

然后，添加JavaScript代码来处理滚动逻辑：

document.addEventListener('DOMContentLoaded', function() {
  const swiperContainer = document.querySelector('.swiper-container');
  let scrollDirection = 'right'; // 初始滚动方向为右

  // 获取所有滑块元素并存储在数组中
  const slides = Array.from(swiperContainer.querySelectorAll('.swiper-slide'));

  // 滑动到下一个滑块函数
  const nextSlide = () => {
    if (scrollDirection === 'right') {
      slideToLeft();
    } else {
      slideToRight();
    }
  };

  // 向左滚动函数
  const slideToLeft = () => {
    if (slides) { // 如果还有未显示的滑块
      const currentSlideIndex = slides.indexOf(slides);
      const nextIndex = (currentSlideIndex + 1) % slides.length;
      
      slides[nextIndex].classList.remove('hidden');
      slides[currentSlideIndex].classList.add('hidden');

      setTimeout(() => {
        slides[currentSlideIndex].style.right = `-calc(100% - ${window.innerWidth}px)`;
        slides[nextIndex].style.right = `calc(${window.innerWidth}px / ${slides.length} * ${nextIndex})`;

        scrollDirection = 'left';
      }, 1); // 移除隐藏类的延迟是为了平滑切换动画效果
    }
  };

  // 向右滚动函数
  const slideToRight = () => {
    if (slides[slides.length - 1]) { // 如果还有未显示的滑块
      const currentSlideIndex = slides.lastIndexOf(slides[slides.length - 1]);
      const previousIndex = (currentSlideIndex - 1 + slides.length) % slides.length;

      slides[previousIndex].classList.remove('hidden');
      slides[currentSlideIndex].classList.add('hidden');

      setTimeout(() => {
        slides[currentSlideIndex].style.left = `${window.innerWidth}px`;
        slides[previousIndex].style.left = `calc(-${window.innerWidth}px * ${previousIndex})`;

        scrollDirection = 'right';
      }, 1);
    }
  };

  // 监听滑动结束事件
  swiperContainer.addEventListener('touchend', event => {
    event.preventDefault(); // 阻止默认的触摸操作

    // 检查滑动方向
    const touchEndX = event.changedTouches.screenX;
    const lastTouchX = swiperContainer.lastChild.dataset.touchStartX;

    if ((touchEndX > lastTouchX && scrollDirection === 'left') || (touchEndX < lastTouchX && scrollDirection === 'right')) {
      return; // 当前滑动方向与滚动方向一致，无需触发滚动
    }

    scrollDirection = touchEndX > lastTouchX ? 'right' : 'left';

    if (!scrollDirection) {
      scrollDirection = 'right'; // 默认设定为向右滚动以防其他条件没有满足
    }

    if (scrollDirection !== 'left' && !slides) { // 已经滚动到了最后一页
      nextSlide();
    } else if (scrollDirection !== 'right' && !slides[slides.length - 1]) { // 已经滚动到了第一页
      nextSlide();
    }
  });
});

这个代码示例包含了基本的无限滚动逻辑，并通过监听触控结束事件来判断滑动方向，进而调用相应的滚动函数。当滑动到最后一页或第一页时会自动触发下一次滚动动作。

-