如何为基础W3图片轮播添加移动端拇指滑动响应支持

你当前代码的滑动功能失效/体验差，是3个逻辑错误导致的，不需要额外安装插件：

• 选择器不匹配：触摸事件绑定到了.slider元素，但你的轮播容器class是slideshow-container、id为slider，事件根本没有绑定到目标元素上
• 方法调用错误：代码里写的$(this).slider('next')/$(this).slider('prev')是jQuery UI滑块组件的API，和你自己写的W3标准轮播逻辑完全不兼容，调用时会直接报错
• 交互逻辑不合理：5px的触发阈值太低，手指稍微碰一下就会切页；没有做滑动方向判断，纵向滚动页面时也会误触切页；没有做触发锁，一次滑动会连续触发多次切页。

JavaScript 逻辑 #

替换你原来的触摸事件+轮播逻辑即可：

let slideIndex = 1;
showSlides(slideIndex);

// 移动端触摸滑动逻辑
const $slider = $('#slider');
let touchStartX = 0;
let touchStartY = 0;
let isSliding = false;
const swipeThreshold = 50; // 滑动触发阈值，单位px，可根据需求调整

$slider.on('touchstart', function(e) {
  touchStartX = e.originalEvent.touches[0].pageX;
  touchStartY = e.originalEvent.touches[0].pageY;
  isSliding = false;
});

$slider.on('touchmove', function(e) {
  if (isSliding) return;
  const touchMoveX = e.originalEvent.touches[0].pageX;
  const touchMoveY = e.originalEvent.touches[0].pageY;
  const deltaX = touchMoveX - touchStartX;
  const deltaY = touchMoveY - touchStartY;

  // 纵向滚动优先级更高，不触发切页
  if (Math.abs(deltaY) > Math.abs(deltaX) * 1.5) return;

  if (Math.abs(deltaX) > swipeThreshold) {
    isSliding = true;
    if (deltaX < 0) {
      // 左滑，下一张
      plusSlides(1);
    } else {
      // 右滑，上一张
      plusSlides(-1);
    }
  }
});

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");
  
  if (n > slides.length) {
    slideIndex = 1
  }
  
  if (n < 1) {
    slideIndex = slides.length
  }
  
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
}

CSS 样式 #

替换原来的样式代码即可，新增了触摸流畅度优化属性：

* {
  box-sizing: border-box
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.mySlides {
  display: none
}

img {
  vertical-align: middle;
}

/* Slideshow container */
.slideshow-container {
  padding: 10px;
  max-width: 1000px;
  position: relative;
  margin: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y; /* 浏览器只处理纵向滚动，横向滑动交给JS，减少卡顿 */
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active,
.dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev,
  .next,
  .text {
    font-size: 11px
  }
}

HTML 结构 #

原有HTML结构不需要改动，确保jQuery引入正常即可：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider" class="slideshow-container">
  <!-- images -->
  <div class="mySlides fade">
    <img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
    <div class="text">Caption Text</div>
  </div>

  <div class="mySlides fade">
    <img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
  </div>

  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>

<div style="text-align:center">
  <!-- dots-->
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
  <span class="dot" onclick="currentSlide(4)"></span>
</div>

• 基于现有代码修改，不需要引入任何额外插件，体积几乎无增加
• 滑动阈值设为50px，符合移动端常规操作习惯，不会出现轻触就切页的问题
• 加了滑动方向判断，纵向滚动页面时不会误触发轮播切换
• 加了滑动状态锁，一次完整滑动只会触发一次切页，不会出现连续跳多张的问题
• 新增CSS触摸优化属性，安卓、iOS端滑动都不会有卡顿感

内容的提问来源于stack exchange，提问作者Scriver