lundi 18 janvier 2021

Javascript: Trying to refactor so many IF statements in order to display pictures continuously

I am trying to display a slideshow of images from an array using a promise. On load, I want the page to display the first image, then the next, and so on. When it's at the last picture index, I want the first picture to display and the code to keep repeating.

The class '.show-image' is visibility: visible. I have the first picture index classed as '.show-image', but the rest are hidden.

Is there a cleaner way of writing this without having so many IF statements?

let pictures= document.querySelectorAll(".moving-pics img");

async function changePicture() {
     
    for (let x=0; x < pictures.length; x++) {
           
       await new Promise(resolve => {
             setTimeout(() => {
                
                 if (!pictures[x - 1]) {
                     pictures[pictures.length - 1].classList.remove('show-image');
                 }

                 if (pictures[x - 1] && pictures[x - 1].classList.contains('show-image')) {
                     pictures[x - 1].classList.remove('show-image');

                 }
      
                 pictures[x].classList.add('show-image');
                 if (!pictures[x + 1]) {

                     resolve();
                     changePicture();
                    
                 }
                 resolve()
             }, 3000)
        });                  
    }
}

Aucun commentaire:

Enregistrer un commentaire