使用JS通过图片数组给img元素设置src实现轮播图失效问题求助

原代码存在的核心问题 #

• JS中使用getElementById("photosEnsaladas")获取元素，但HTML中的img标签仅设置了class属性为photosEnsaladas，未设置对应id，导致元素获取失败无法赋值src
• 下标变量positionCarrusel定义在函数内部，每次调用函数都会被重置为0，无法实现下标累加切换
• 直接递归调用playFoto()没有设置延时，会导致无限递归爆栈，浏览器直接卡死，也看不到轮播切换效果
• 下标判断逻辑存在溢出问题：数组长度为4时合法下标是0-3，原有逻辑会让下标增加到4才重置，访问数组第4位会返回undefined
• HTML语法不规范：注释格式错误，且p标签内嵌套ul不符合HTML规范

修正后代码 #

HTML代码 #

<section class="tablaNovedadesEnsalada">
  <!-- that is the img -->
  <img src="" alt="photos carrusel" id="photosEnsaladas" class="photosEnsaladas">
  <div class="textoNovedades">
    <ul>
      <li>ensalada de laminas de bacalao</li>
      <li>ensalada de laminas de bacalao</li>
      <li>Ensalada de alcachofas</li>
      <li>Ensalada de yemas</li>
      <li>ensalada de ventresca</li>
      <li>Ensalada queso cabra</li>
    </ul>
  </div>
</section>

JS代码 #

window.onload = function() {
  // 将下标变量提到函数外部，避免每次调用被重置
  let positionCarrusel = 0;
  const imagenEnsaladas = document.getElementById("photosEnsaladas")
  const carruselPhotos = [
    'assets/carrusel/ens.-ventresca-300-x300-300x300.png',
    'assets/carrusel/ensalada bacalao200x200.png',
    'assets/carrusel/ensalada-alcachofas-300x-300-300x300.jpg',
    'assets/carrusel/ensalada-bacalao.png'
  ];

  function playFoto() {
    // 先赋值再修改下标，优先展示第一张图
    imagenEnsaladas.src = carruselPhotos[positionCarrusel];
    // 下标累加，超过最大索引直接重置为0
    positionCarrusel = (positionCarrusel + 1) % carruselPhotos.length;
    // 设置3秒切换一次，可自行修改间隔时长
    setTimeout(playFoto, 3000);
  }

  // 首次调用启动轮播
  playFoto();
}

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