js触屏滑动banner

基础概念：触屏滑动banner是指在移动设备上，通过触摸屏幕来滑动切换banner图的一种交互方式。它通常依赖于JavaScript库或框架来实现平滑的滑动效果和触摸事件的处理。

优势：

用户体验好：触屏滑动使得用户可以直接通过手指操作，无需点击，更加直观便捷。
适应性强：自动适应不同屏幕尺寸和设备类型。
交互性强：可以添加各种动画效果，提升视觉吸引力。

类型：

无限循环滑动：banner图可以无限循环播放。
自动播放与暂停：在一定时间后自动切换图片，并在用户触摸时暂停自动播放。
分页指示器：显示当前图片的位置和总图片数量。
触摸反馈：滑动时提供视觉或触觉反馈。

应用场景：

网站首页的广告展示。
应用的启动画面或欢迎界面。
电商平台的商品推荐。

常见问题及解决方法：

滑动不流畅：
- 原因：可能是由于页面加载的资源过多，导致渲染卡顿。
- 解决方法：优化图片大小，减少DOM元素，使用CSS3硬件加速。

触摸事件无响应：
- 原因：可能是JavaScript代码中触摸事件绑定不正确或冲突。
- 解决方法：检查事件绑定代码，确保没有其他脚本阻止了默认行为。
自动播放功能失效：
- 原因：可能是由于页面可见性变化（如切换到后台）导致定时器停止。
- 解决方法：使用visibilitychange事件监听页面可见性，并相应地控制自动播放。

示例代码：以下是一个简单的触屏滑动banner的JavaScript实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Touch Slider</title>
<style>
  .slider {
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  .slider-container {
    display: flex;
    transition: transform 0.3s ease;
  }
  .slider-container img {
    width: 100%;
    flex-shrink: 0;
  }
</style>
</head>
<body>

<div class="slider" id="slider">
  <div class="slider-container" id="sliderContainer">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
</div>

<script>
  const sliderContainer = document.getElementById('sliderContainer');
  let startX = 0;
  let currentTranslate = 0;
  let prevTranslate = 0;
  let animationID = 0;
  let currentIndex = 0;

  sliderContainer.addEventListener('touchstart', touchStart);
  sliderContainer.addEventListener('touchmove', touchMove);
  sliderContainer.addEventListener('touchend', touchEnd);

  function touchStart(event) {
    startX = event.touches[0].clientX;
    cancelAnimationFrame(animationID);
  }

  function touchMove(event) {
    const currentX = event.touches[0].clientX;
    currentTranslate = prevTranslate + currentX - startX;
  }

  function touchEnd() {
    const movedBy = currentTranslate - prevTranslate;
    if (movedBy < -100 && currentIndex < 2) currentIndex += 1;
    if (movedBy > 100 && currentIndex > 0) currentIndex -= 1;
    prevTranslate = currentTranslate;
    setSliderPosition();
  }

  function setSliderPosition() {
    sliderContainer.style.transform = `translateX(-${currentIndex * 100}%)`;
  }
</script>

</body>
</html>

这个示例展示了如何创建一个基本的触屏滑动banner，包括触摸事件的监听和处理，以及图片容器的位置更新。