请求协助：为现有Image Slider添加Auto-play与Touch-swipe功能

直接替换你现有的JavaScript代码即可，以下是整合了两项功能的完整代码：

var slidePosition = 1;
var slideInterval; // 存储自动播放定时器
const slideDelay = 3000; // 自动切换间隔（毫秒），可自行调整

SlideShow(slidePosition);
startSlideShow(); // 启动自动播放

// 鼠标悬停滑块区域暂停播放，离开后继续（需确保容器选择器正确）
const sliderContainer = document.querySelector('.slider-container');
if (sliderContainer) {
  sliderContainer.addEventListener('mouseenter', pauseSlideShow);
  sliderContainer.addEventListener('mouseleave', startSlideShow);
}

function plusSlides(n) {
  SlideShow(slidePosition += n);
}

function currentSlide(n) {
  resetSlideShow(); // 点击圆点时重置自动播放
  SlideShow(slidePosition = n);
}

function SlideShow(n) {
  var i;
  var slides = document.getElementsByClassName("Containers");
  var circles = document.getElementsByClassName("dots");
  if (n > slides.length) {slidePosition = 1}
  if (n < 1) {slidePosition = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < circles.length; i++) {
      circles[i].className = circles[i].className.replace(" enable", "");
  }
  slides[slidePosition-1].style.display = "block";
  circles[slidePosition-1].className += " enable";
} 

// 自动播放控制函数
function startSlideShow() {
  pauseSlideShow(); // 先清除旧定时器，避免重复触发
  slideInterval = setInterval(() => {
    plusSlides(1);
  }, slideDelay);
}

function pauseSlideShow() {
  if (slideInterval) {
    clearInterval(slideInterval);
    slideInterval = null;
  }
}

function resetSlideShow() {
  pauseSlideShow();
  startSlideShow();
}

// 触摸滑动控制函数
let touchStartX = 0;
let touchEndX = 0;

document.addEventListener('touchstart', (e) => {
  touchStartX = e.changedTouches[0].screenX;
});

document.addEventListener('touchend', (e) => {
  touchEndX = e.changedTouches[0].screenX;
  handleSwipe();
});

function handleSwipe() {
  const swipeThreshold = 50; // 滑动触发阈值，避免误触
  // 左滑切下一张
  if (touchStartX - touchEndX > swipeThreshold) {
    plusSlides(1);
    resetSlideShow();
  }
  // 右滑切上一张
  if (touchEndX - touchStartX > swipeThreshold) {
    plusSlides(-1);
    resetSlideShow();
  }
}

功能细节说明 #

1. 自动播放功能 #

• 可通过修改slideDelay数值调整自动切换速度（默认3000毫秒=3秒）
• 鼠标悬停在滑块容器上时自动暂停，离开后恢复播放，避免干扰用户查看内容
• 点击底部圆点切换幻灯片时，会重置自动播放计时器，从当前页重新开始计时

2. 触摸滑动功能 #

• 设置了50像素的滑动阈值，只有滑动距离超过这个值才会触发切换，减少误触
• 向左滑动切换到下一张，向右滑动切换到上一张
• 滑动操作后会重置自动播放计时器

注意：代码中document.querySelector('.slider-container')需要匹配你网站中滑块的外层容器类名/ID，如果你的容器用的是其他命名，比如#home-slider，请修改成对应的选择器，确保鼠标悬停暂停功能正常生效。

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