Le but de cet exercice est de créer un simple diaporama qui permet de faire défiler des images.
Voici comment agencer votre code :
- Créer une classe Slideshow
- le constructeur de cette classe attend 4 paramètres :
- nb_images (le nombre d'images que va gérer le slideshow,
- width (la largeur du slideshow),
- height (la hauteur du slideshow),
- speed (la vitesse de changement d'images en millisecondes).
- Dans le constructeur, vous initialisez 5 propriétés :
- nb_images (int)
- images (array)
- width (number)
- height (number)
- speed (number)
- puis, toujours dans le constructeur, vous faites appel à trois méthodes
-
feedSs (// remplissage du tableau d'images "images")
Pour créer des images (élément du DOM "img"), vous utiliserez la méthode suivante :createImage = function() { // création d'une image const img = document.createElement("img"); img.setAttribute("src",`https://picsum.photos/${this.width}/${this.height}?id=${Math.random()*1000}`); return img; } -
render (rendu du slideshow)
-
animateSs(animation du slideshow)
-
