如何使用JQuery实现轮播图自动播放功能

• 前置要求：先确认jQuery库已正确引入到项目中，脚本执行位置放在页面所有DOM元素之后，避免获取不到幻灯片节点。
• 可用实现代码如下：

// 全局变量定义
let currentSlideIndex = 1;
let autoPlayTimer;

// 页面加载完成后初始化
$(document).ready(function() {
  // 初始展示第一张轮播图
  renderSlides(currentSlideIndex);
  // 启动自动播放，3秒切换一次，可自行调整时间参数
  startAutoPlay();
});

// 上下张切换逻辑，适配你现有HTML中的onclick调用
function plusSlides(offset) {
  // 手动切换时先清除自动播放定时器，避免冲突
  clearTimeout(autoPlayTimer);
  // 计算新的索引值
  currentSlideIndex += offset;
  renderSlides(currentSlideIndex);
  // 手动操作后重启自动播放
  startAutoPlay();
}

// 轮播图渲染逻辑
function renderSlides(index) {
  const allSlides = $(".mySlides");
  // 索引边界处理
  if (index > allSlides.length) currentSlideIndex = 1;
  if (index < 1) currentSlideIndex = allSlides.length;
  // 隐藏所有轮播图，显示当前选中的轮播图
  allSlides.hide();
  allSlides.eq(currentSlideIndex - 1).show();
}

// 自动播放逻辑
function startAutoPlay() {
  autoPlayTimer = setTimeout(() => {
    plusSlides(1);
  }, 3000);
}

• 常见异常排查点：
  • 检查浏览器控制台是否有$ is not defined报错，如有则是jQuery未成功引入
  • 确认CSS中.mySlides类没有设置优先级过高的显示属性，避免hide()方法不生效
  • 不要重复给prev/next按钮绑定点击事件，现有HTML中的onclick属性可直接调用对应方法

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