触摸屏自动图片轮播多次滚动后显示空白问题

一共6个导致错位/空白的问题，按影响优先级排序：

• 最高优先级冲突：CSS中给.slide类绑定了硬编码的@keyframes slide无限动画，和JS控制的left位移逻辑完全冲突。两套位移逻辑同时生效，会持续打乱轮播轨道位置，滚动数次后必然出现空白。你已经用JS实现了首尾克隆的无缝轮播逻辑，这个CSS动画是完全多余的残留代码。
• 事件绑定拼写错误：slides.addEventListener("mouseown", dragStart); 中事件名少写了字母d，正确事件名是mousedown，导致PC端鼠标拖拽逻辑完全失效。
• 滑动阈值硬编码：拖拽结束判断切页的阈值写死为496px，没有和实际单张slide宽度绑定，在不同分辨率、窗口尺寸下判断逻辑失效，容易出现滑不动、越界滑出空白的问题。
• 自动轮播逻辑缺失+冲突：你声明了myTimer变量但没有实现自动轮播的启动/暂停逻辑，用户触摸/点击操作时没有暂停自动轮播，会出现交互过程中自动轮播和用户操作同时修改轮播位置，导致轨道错位。
• transitionend事件未做拦截：该事件会在所有CSS属性过渡完成时触发（包括opacity等其他属性），且会冒泡，容易重复触发checkIndex函数，导致索引和位置不匹配。
• 宽度取值只初始化一次：slideWidth在页面加载时取一次固定值，窗口缩放、移动端横竖屏切换时宽度变化后，位移计算值和实际宽度不匹配，直接滑出空白区域。
• 小问题：HTML中第三张图片的src写为img3-png，后缀格式错误，会导致该图片本身加载失败显示空白。

JS部分 #

const slides = document.getElementById("slides");
// 克隆完成后再获取所有slide节点，避免后续计算遗漏克隆节点
let allSlides = document.querySelectorAll(".slide");
let slidesLength = allSlides.length; // 后续克隆完成后更新为真实slide数量
let slideWidth = allSlides[0].offsetWidth;

let index = 0;
let posX1;
let posX2;
let initialPosition;
let finalPosition;
let myTimer;
const autoPlayInterval = 3000; // 自动轮播间隔3秒

let canISlide = true;

const prev = document.getElementById("prev");
const next = document.getElementById("next");

const firstSlide = allSlides[0];
const lastSlide = allSlides[allSlides.length - 1];

const cloneFirstSlide = firstSlide.cloneNode(true);
const cloneLastSlide = lastSlide.cloneNode(true);

slides.appendChild(cloneFirstSlide);
slides.insertBefore(cloneLastSlide, firstSlide);
// 更新真实slide数量、节点列表，初始化位置默认显示第一张真实slide
slidesLength = allSlides.length;
allSlides = document.querySelectorAll(".slide");
slides.style.left = `-${slideWidth}px`;

// 启动自动轮播
startAutoPlay();

next.addEventListener("click", () => switchSlide("next"));
prev.addEventListener("click", () => switchSlide("prev"));

// 只监听left属性的过渡结束，避免其他属性触发checkIndex
slides.addEventListener("transitionend", (e) => {
  if(e.propertyName === 'left') checkIndex();
});

// 修复事件名拼写错误
slides.addEventListener("mousedown", dragStart);

slides.addEventListener("touchstart", dragStart);
slides.addEventListener("touchmove", dragMove);
slides.addEventListener("touchend", dragEnd);

// 鼠标/触摸进入轮播区域暂停自动播放
slides.addEventListener('mouseenter', pauseAutoPlay);
slides.addEventListener('touchstart', pauseAutoPlay);
// 离开/触摸结束恢复自动播放
slides.addEventListener('mouseleave', startAutoPlay);
slides.addEventListener('touchend', startAutoPlay);

// 监听窗口尺寸变化，更新slide宽度，重置位置
window.addEventListener('resize', () => {
  slideWidth = allSlides[0].offsetWidth;
  slides.classList.remove("transition");
  slides.style.left = `-${(index + 1) * slideWidth}px`;
});

function dragStart(e) {
  e.preventDefault();
  initialPosition = slides.offsetLeft;

  if (e.type == "touchstart") {
    posX1 = e.touches[0].clientX;
  } else {
    posX1 = e.clientX;
    document.onmouseup = dragEnd;
    document.onmousemove = dragMove;
  }
}

function dragMove(e) {
  if (e.type == "touchmove") {
    posX2 = posX1 - e.touches[0].clientX;
    posX1 = e.touches[0].clientX;
  } else {
    posX2 = posX1 - e.clientX;
    posX1 = e.clientX;
  }

  slides.style.left = `${slides.offsetLeft - posX2}px`;
}

function dragEnd() {
  finalPosition = slides.offsetLeft;
  // 阈值改为单张slide宽度的1/4，滑动超过1/4宽度就切页，不用硬编码
  const threshold = slideWidth / 4;
  if (finalPosition - initialPosition < -threshold) {
    switchSlide("next", "dragging");
  } else if (finalPosition - initialPosition > threshold) {
    switchSlide("prev", "dragging");
  } else {
    slides.style.left = `${initialPosition}px`;
  }

  document.onmouseup = null;
  document.onmousemove = null;
}

function switchSlide(arg, arg2) {
  slides.classList.add("transition");

  if (canISlide) {
    if (!arg2) {
      initialPosition = slides.offsetLeft;
    }
    if (arg == "next") {
      slides.style.left = `${initialPosition - slideWidth}px`;
      index++;
    } else {
      slides.style.left = `${initialPosition + slideWidth}px`;
      index--;
    }
  }

  canISlide = false;
}

function checkIndex() {
  slides.classList.remove("transition");
  // 滑到最前面的克隆最后一张，无动画跳转到真实最后一张
  if (index == -1) {
    slides.style.left = `-${slidesLength * slideWidth}px`;
    index = slidesLength - 1;
  }
  // 滑到最后面的克隆第一张，无动画跳转到真实第一张
  if (index == slidesLength) {
    slides.style.left = `-${1 * slideWidth}px`;
    index = 0;
  }

  canISlide = true;
}

// 自动轮播逻辑
function startAutoPlay() {
  clearInterval(myTimer);
  myTimer = setInterval(() => {
    switchSlide("next");
  }, autoPlayInterval);
}

function pauseAutoPlay() {
  clearInterval(myTimer);
}

CSS部分 #

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 避免图片变形 */
  display: block;
}

.slider {
  overflow: hidden;
  position: relative;
  width: 100%; /* 改成响应式宽度，适配移动端 */
  max-width: 1080px;
  height: 500px;
  margin: auto;
}

.slides {
  display: flex;
  position: absolute;
  top: 0;
  cursor: grab;
}

.slides.transition {
  transition: left 0.3s ease-in-out; /* 只给left加过渡，避免其他属性触发transitionend */
}

.slides:active {
  cursor: grabbing;
}

.slide {
  width: 100%;
  min-width: 100%; /* 宽度自适应父容器，不用固定1080px */
  height: 500px;
  /* 移除冲突的CSS动画绑定 */
}

.prev,
.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #f3f3f3;
  font-size: 4rem;
  cursor: pointer;
  z-index: 10;
  text-decoration: none;
  user-select: none;
}

.next {
  right: 2rem;
}

.prev {
  left: 2rem;
}

.next:hover, .prev:hover {
  color: #fff;
  transition: color 0.2s ease-in-out;
}

HTML部分 #

<div class="container">
  <div class="slider">
    <div class="slides" id="slides">
        <span class="slide">
            <a href="#">
            <img loading="lazy" src="img.png" alt="轮播图1"></a>
        </span>
        <span class="slide">
            <a href="#">
           <img loading="lazy" src="img2.png" alt="轮播图2"></a>
         </span>
         <span class="slide">
            <a href="#">
              <!-- 修复src后缀错误 -->
           <img loading="lazy" src="img3.png" alt="轮播图3"></a>
         </span>
    </div>
    <a href="javascript:;" id="prev" class="prev">❮
          <i class="fas fa-caret-left"></i>
     </a>
     <a href="javascript:;" id="next" class="next">❯
         <i class="fas fa-caret-right"></i>
      </a>
  </div>
</div>

• 移除了冲突的CSS动画，所有位移统一由JS控制，不会再出现轨道错位
• 自动轮播逻辑完整，触摸/鼠标悬停时自动暂停，离开后恢复，不会和用户操作冲突
• 宽度自适应，窗口缩放、横竖屏切换时自动校正位置，不会出现空白
• 滑动阈值动态计算，不同尺寸下滑动手感一致
• 修复了PC端鼠标拖拽失效的问题
• 前后按钮点击不会跳转到页面顶部

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