如何使用JavaScript和jQuery实现同步联动的自动播放图片轮播

问题原因 #

现有自动播放逻辑与手动点击逻辑完全独立，未复用已实现的图片、文字、圆点指示器联动切换方法，单独编写的jQuery淡入淡出逻辑存在选择器匹配错误（图片包裹在.images-wrapper容器内，并非轮播容器直接子元素），最终导致三类元素状态不同步。

修复步骤 #

• 完全删除原有独立编写的jQuery自动播放代码，避免和原生CSS类控制的切换动效冲突
• 改造原有moveSlider切换函数，同时兼容点击事件触发、自动播放传参触发两种场景
• 新增定时器逻辑，按固定间隔计算下一页索引，调用统一的切换方法，保证自动播放和手动操作的动效、联动逻辑完全一致
• 可选优化：新增鼠标悬停暂停交互，避免用户浏览内容时轮播自动切换

修改后的完整JavaScript代码 #

其他HTML、CSS代码无需调整，直接替换原有JS部分即可：

const inputs = document.querySelectorAll(".campo-input"); 
const toggle_btn = document.querySelectorAll(".toggle"); 
const main = document.querySelector("main");
const bullets = document.querySelectorAll(".bullets span");
const images = document.querySelectorAll(".image");
const carouselEl = document.querySelector(".carousel");

// 轮播全局状态
let currentIndex = 1; // 当前激活页索引，初始为第一页
const totalSlides = bullets.length;
let autoPlayTimer = null;
const autoPlayDelay = 3000; // 自动播放间隔3秒

inputs.forEach((inp) => {
  inp.addEventListener("focus", () => {
    inp.classList.add("active");
  });
  inp.addEventListener("blur", () => {
    if (inp.value != "") return;
    inp.classList.remove("active");
  });
});

toggle_btn.forEach((btn) => {
  btn.addEventListener("click", () => {
    main.classList.toggle("sign-up-mode");
  });
});

// 统一轮播切换方法
function moveSlider(index) {
  // 兼容圆点点击场景：未传索引时从点击的圆点上取值
  const activeIndex = index ? index : Number(this.dataset.value);
  currentIndex = activeIndex;

  // 切换图片显示
  const currentImage = document.querySelector(`.img-${activeIndex}`);
  images.forEach((img) => img.classList.remove("show"));
  currentImage.classList.add("show");

  // 切换文字位移
  const textSlider = document.querySelector(".container-texto");
  textSlider.style.transform = `translateY(${-(activeIndex - 1) * 2.2}rem)`;

  // 切换圆点激活状态
  bullets.forEach((bull) => bull.classList.remove("active"));
  bullets[activeIndex - 1].classList.add("active");
}

// 绑定圆点点击事件
bullets.forEach((bullet) => {
  bullet.addEventListener("click", moveSlider);
});

// 自动播放控制方法
function startAutoPlay() {
  autoPlayTimer = setInterval(() => {
    // 计算下一页索引，到最后一页后回到第一页
    const nextIndex = currentIndex >= totalSlides ? 1 : currentIndex + 1;
    moveSlider(nextIndex);
  }, autoPlayDelay);
}

function stopAutoPlay() {
  clearInterval(autoPlayTimer);
}

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

// 鼠标悬停轮播时暂停播放，移开后恢复
carouselEl.addEventListener("mouseenter", stopAutoPlay);
carouselEl.addEventListener("mouseleave", startAutoPlay);

效果说明 #

修复后自动播放会完全复用手动点击的切换逻辑，图片切换动效、文字位移、圆点激活状态三者完全同步，和手动操作的表现没有任何差异。

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