为 JS 函数创建一个循环

Question

我有一个用于数组的 JS 函数，其中包含图像和 alt 的 HTML class 显示图像 src 和 alt 的标题。 onclick、function 显示下一张图片并停在最后一张图片。 现在我希望最后一张图片链接到第一张图片。 我会自己尝试，但欢迎任何帮助。

这是我的代码：

 const createImage = (image, alt, index) => { return `<img src="${image}" alt="${alt}" class="img-thumbnail border-0 img-thumbnail-desktop" onClick="expandingImage(this)" currentimage="${index}"/>`; }; // Logic 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'); if (current < imagesArr.length - 1) { img.setAttribute('src', imagesArr[current + 1].image) img.setAttribute('alt', imagesArr[current + 1].alt) img.setAttribute('currentimage', current + 1) document.querySelector("#imgtext").innerHTML = imagesArr[current + 1].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"; }

 <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-->

Answer 1

到达数组末尾时，使用模运算将下一个图像编号环绕为 0。

 const imagesArr = [{ image: '#####', alt: '' }, { image: '#####', alt: '' }, { image: '#####', alt: '' }, ]; const createImage = (image, alt, index) => { return `<img src="${image}" alt="${alt}" class="img-thumbnail border-0 img-thumbnail-desktop" onClick="expandingImage(this)" currentimage="${index}"/>`; }; // Logic 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'); let next = (current + 1) % imagesArr.length; img.setAttribute('src', imagesArr[next].image) img.setAttribute('alt', imagesArr[next].alt) img.setAttribute('currentimage', next) document.querySelector("#imgtext").innerHTML = imagesArr[next].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"; }

 <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-->