如何使用javascript使用下一个和上一个图标更改img?

//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 或上一个和

  • 我不知道该怎么做。 请帮帮我
huxinyuhao 回答:如何使用javascript使用下一个和上一个图标更改img?

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/11978.html

大家都在问