实现移动端touch事件的横向滑动列表效果并循环展示

实现移动端touch事件的横向滑动列表效果并循环展示的一种常见方法是使用CSS3的transform属性和JavaScript的Touch事件。

首先，创建一个容器 div，设置其宽度为视口宽度的倍数，如 300%。在容器内部创建多个 div 元素，分别放置需要展示的内容。

然后，通过CSS3的transform属性将容器的位置移动到第二个或第三个 div 元素的位置，使得第一个 div 元素在视口外不可见。

接下来，使用JavaScript监听Touch事件，根据手指在屏幕上的移动距离，通过改变容器的transform属性来实现横向滑动效果。同时，当容器滑动到最后一个 div 元素时，将其位置移动到第一个 div 元素的位置，实现循环展示的效果。

下面是一个实现横向循环滑动列表效果的示例代码：

HTML：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

CSS：

.container {
  width: 300%;
  display: flex;
  transition: transform 0.3s ease-in-out;
}

.item {
  flex-basis: calc(100% / 3);
  text-align: center;
  font-size: 30px;
}

JavaScript：

var container = document.querySelector('.container');
var startX, startY, moveX, moveY, distanceX, distanceY;

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

container.addEventListener('touchmove', function(e) {
  moveX = e.touches[0].clientX;
  moveY = e.touches[0].clientY;
  distanceX = moveX - startX;
  distanceY = moveY - startY;

  if (Math.abs(distanceX) > Math.abs(distanceY)) {
    e.preventDefault();
    container.style.transform = 'translateX(' + (-100 / 3 + distanceX / window.innerWidth * 100) + '%)';
  }
});

container.addEventListener('touchend', function(e) {
  if (distanceX > 0 && Math.abs(distanceX) > window.innerWidth / 5) {
    container.style.transform = 'translateX(' + (-200 / 3) + '%)';
  } else if (distanceX < 0 && Math.abs(distanceX) > window.innerWidth / 5) {
    container.style.transform = 'translateX(' + '0' + '%)';
  } else {
    container.style.transform = 'translateX(' + (-100 / 3) + '%)';
  }
});

container.addEventListener('transitionend', function() {
  if (container.style.transform === 'translateX(' + (-200 / 3) + '%)') {
    container.style.transition = 'none';
    container.style.transform = 'translateX(' + (-100 / 3) + '%)';
    setTimeout(function() {
      container.style.transition = 'transform 0.3s ease-in-out';
    }, 0);
  } else if (container.style.transform === 'translateX(' + '0' + '%)') {
    container.style.transition = 'none';
    container.style.transform = 'translateX(' + (-100 / 3 * 2) + '%)';
    setTimeout(function() {
      container.style.transition = 'transform 0.3s ease-in-out';
    }, 0);
  }
});

在这个示例中，我们使用了Flex布局和CSS3的calc()函数来创建了一个横向排列的列表。Touch事件监听了用户的滑动操作，通过改变容器的transform属性来实现横向滑动效果。当滑动到最后一个 div 元素时，通过修改transform属性实现循环展示的效果。同时，我们还添加了一些防抖和节流的优化，使得滑动效果更加流畅。