//html code i have like this div 5 times
<div class="services-cell">
<img src="../images-templates/camera-1.jpg" alt=""
class="services-cell-img">
<div class="services-cell-text">Digital Marketing</div>
</div>
<!-- 2 -->
<div class="services-cell">
<img src="../images-templates/bee-2.webp" alt=""
class="services-cell-img">
<div class="services-cell-text">Website Development
</div>
</div>
// js code
// start Img Gallery:
let galleryImages = document.querySelectorAll('.services-cell');
let getLastesOpenedImg;
let WindowWidth = window.innerWidth;
galleryImages.forEach(function (image,index) {
image.onclick = function () {
getLastesOpenedImg = index + 1;
let container = document.body;
let newImgWindow = document.createElement('div');
container.appendChild(newImgWindow);
newImgWindow.setattribute('class','img-window');
newImgWindow.setattribute('onclick','closeImg()');
let newImg = image.firstElementChild.cloneNode();
newImgWindow.appendChild(newImg);
newImg.classList.remove('services-cell-img');
newImg.classList.add('popup-img');
newImg.setattribute('id','current-img');
newImg.onload = function () {
let newNextBtn = document.createElement('a');
newNextBtn.innerHTML = '<i class="fas fa-chevron-right next"></i>';
container.appendChild(newNextBtn);
newNextBtn.setattribute('class','img-btn-next');
newNextBtn.setattribute('onclick','changeImg(1)');
let newPrevBtn = document.createElement('a');
newPrevBtn.innerHTML = '<i class="fas fa-chevron-left next"></i>';
container.appendChild(newPrevBtn);
newPrevBtn.setattribute('class','img-btn-prev');
newPrevBtn.setattribute('onclick','changeImg(0)');
}
}
)}
这里是我的问题的解释: 我在 HTML 页面上有 7 个图像,然后当您单击它时会弹出 IMG,并且在单击它时会出现两个图标(下一个和上一个)假设为您提供下一个 IMG 或上一个和
- 我不知道该怎么做。 请帮帮我