Récupérer les images suivantes :
- http://exos.coopernet.fr/exo05-bootstrap/images/ella_fitzgerald.jpg
- http://exos.coopernet.fr/exo05-bootstrap/images/miriam-makeba.jpg
- http://exos.coopernet.fr/exo05-bootstrap/images/NinaSimone.jpg
Vous pouvez utiliser la commande wget http://exos.coopernet.fr/exo05-bootstrap/images/NinaSimone.jpg . (merci Laurent)
Dans le HTML, les placer dans une section d'id "diapo"
Faire en sorte que cette section ait pour taille exacte :
- width: 300px;
- height: 169px;
Faire en sorte que seule une image ne soit affichée en utilisant la propriété css "overflow".
Dans un fichier javascript que vous nommerez "diapo.js"
- Créez une fonction récursive "nextSlide()" qui va :
- selectionner la premiere image (grace au selecteur "img:first")
- positionner la première image en tant que dernier enfant de la section d'identité "diapo"
- s'appeler de façon récursive au bout de 3 seconde (utiliser setTimeout())
- Créez le bouton "Go" (avec jQuery) qui permet de lancer et d'arrêter le slideshow.
Il faudra donc :- créer un élément du dom
- le positionner juste après le div d'id diapo
- lui associer un gestionnaire d'évément "click" qui appellera la fonction nextSlide()
- Créez des boutons "indicators" en utilisant la boucle "each"
- faites en sorte que ces boutons changent d'aspect via le css et les méthodes jQuery addClass() et removeClass()
Le résultat doit s'approcher de ce rendu visuel :
