如何修改JavaScript图片切换函数实现循环轮播？

要实现点击最后一张图切换回第一张的循环效果，只需要修改nextImage函数的逻辑即可，核心是用取模运算处理索引循环：

修改后的nextImage函数 #

const nextImage = (img) => {
  const current = +img.getAttribute('currentimage');
  // 用取模计算下一个索引，自动循环到开头
  const nextIndex = (current + 1) % imagesArr.length;
  
  img.setAttribute('src', imagesArr[nextIndex].image);
  img.setAttribute('alt', imagesArr[nextIndex].alt);
  img.setAttribute('currentimage', nextIndex);
  document.querySelector("#imgtext").innerHTML = imagesArr[nextIndex].alt;
};

完整代码示例 #

JavaScript部分

const createImage = (image, alt, index) => {
  return `<img src="${image}" alt="${alt}" class="img-thumbnail border-0 img-thumbnail-desktop" onClick="expandingImage(this)" currentimage="${index}"/>`;
};

const createImages = (images) => {
  let final = '';
  for (let i = 0; i < images.length; i++) {
    const e = images[i];
    final += createImage(e.image, e.alt, i);
  }
  return final;
};

document.addEventListener("DOMContentLoaded", function() {
  console.log('Loaded');
  const container = document.querySelector('.thumbnailContainer');
  container.innerHTML = createImages(imagesArr);
});

const nextImage = (img) => {
  const current = +img.getAttribute('currentimage');
  const nextIndex = (current + 1) % imagesArr.length;
  
  img.setAttribute('src', imagesArr[nextIndex].image);
  img.setAttribute('alt', imagesArr[nextIndex].alt);
  img.setAttribute('currentimage', nextIndex);
  document.querySelector("#imgtext").innerHTML = imagesArr[nextIndex].alt;
};

function expandingImage(imgs) {
  const expandImg = document.getElementById("expandedImg");
  const imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.setAttribute("currentimage", imgs.getAttribute('currentimage'));
  expandImg.parentElement.style.display = "block";
}

HTML部分

<script type="text/javascript">
  const imagesArr = [{
      image: '#####',
      alt: ''
    }, {
      image: '#####',
      alt: ''
    },
    {
      image: '#####',
      alt: ''
    }
  ];
</script>

<div class="col-md-9 ">
  <!--START MAIN CONTENT-->
  <div class="hideMobile">
    <div class="d-flex justify-content-center">
      <span onclick="this.parentElement.style.display='none'"></span>
      <img class="img-fluid img-overlay" id="expandedImg" src="#####">
    </div>
    <div class="container expandedImgSize d-flex justify-content-center" id="imgtext">
      <figcaption class="figure-caption">Caption</figcaption>
    </div>
  </div>
  <!--END MAIN CONTENT-->
</div>

关键逻辑解释 #

取模运算(current + 1) % imagesArr.length的作用：

• 当当前索引不是最后一位时，current + 1就是下一张图的索引，取模结果等于自身
• 当当前索引是最后一位（值为imagesArr.length - 1）时，current + 1等于imagesArr.length，取模后结果为0，也就是回到第一张图的索引，实现循环

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