Comment afficher une image aléatoirement en HTML et JavaScript ?

Réponses rédigées par Antoine

Dernière mise à jour : 2022-02-19 15:58:18

Question

Comment faire pour afficher une image aléatoirement en HTML et JavaScript, et changer l'image à un intervalle régulier, merci.

Réponse

Pour afficher une image aléatoirement en HTML et JavaScript, vous pouvez créer un array où lister les images, puis utiliser la fonction Math.random(). Pour changer d'image à un intervalle régulier, vous pouvez utiliser la fonction SetInterval().

Dans l'exemple ci-dessous on crée un array nommé images où on liste les images au format HTML.

On identifie ensuite le conteneur où seront affichées les images, via son ID.

Puis on utilise la fonction Math.random() pour sélectionner de manière aléatoire l'une des images.

La fonction innerHTML permet enfin d'afficher l'image sélectionnée dans le conteneur.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Comment afficher une image aléatoirement en HTML et JavaScript ?</title>
</head>
<body>   
<div id="images"></div>
<script>
const images = [
'<img src="001.png" alt="image 001">',
'<img src="002.png" alt="image 002">',
'<img src="003.png" alt="image 003">'
];
const conteneur = document.getElementById('images');
function afficherImage() {
var a = Math.floor(Math.random() * images.length);
var image = images[a];
conteneur.innerHTML = image;
}
setInterval(afficherImage, 5000);
</script>
</body>
</html>