JavaScript implémente l'affichage aléatoire des images

JavaScript est un langage de script largement utilisé dans le développement Web. L'une des fonctions est de nous aider à afficher les images de manière aléatoire. L'affichage aléatoire d'images peut augmenter le plaisir et l'interactivité du site Web, tout en offrant aux utilisateurs une meilleure expérience visuelle. Cet article explorera comment implémenter la fonction d'affichage aléatoire d'images en JavaScript.

1. Obtenez le tableau d'images

Nous devons d'abord définir un tableau d'images en JavaScript, puis ajouter les images qui doivent être affichées de manière aléatoire au tableau. Dans cet exemple, nous utiliserons 3 images simples.

var images = new Array();
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";

2. Écrivez une fonction

Ensuite, nous devons écrire une fonction pour sélectionner des images au hasard. Cette fonction sélectionnera aléatoirement une image dans le tableau d'images que nous avons défini et l'affichera sur la page Web.

function displayRandomImage() {
    var randomIndex = Math.floor(Math.random() * images.length);
    var image = document.createElement("img");
    image.src = images[randomIndex];
    document.body.appendChild(image);
}

La première ligne de code de cette fonction utilise la méthode Math.random(), qui renvoie un nombre aléatoire supérieur ou égal à 0 et inférieur à 1. Nous multiplions ce nombre aléatoire par la longueur du tableau d'images pour obtenir une décimale, puis utilisons la méthode Math.floor() pour l'arrondir à un nombre entier. Cet entier est l'index de l'image que nous devons afficher.

Créez ensuite un élément img, définissez l'attribut src de l'élément sur le chemin d'une image sélectionnée au hasard, puis ajoutez l'élément à la page Web. Cela permet la fonction d’affichage aléatoire des images.

3. Déclencher l'affichage aléatoire

Enfin, nous devons déclencher la fonction d'affichage aléatoire des images dans la page Web. Pour ce faire, nous pouvons lier la fonction à l'événement click d'un bouton ou d'un lien, ou déclencher la fonction dans l'événement load de la page Web.

window.onload = displayRandomImage;

Le code ci-dessus appellera automatiquement la fonction qui affiche les images de manière aléatoire après le chargement de la page Web. Vous pouvez également le lier à l'événement click d'un bouton :

<button onclick="displayRandomImage()">随机显示图片</button>

De cette façon, lorsque l'utilisateur clique sur le bouton, la fonction qui affiche aléatoirement l'image sera déclenchée, affichant ainsi aléatoirement une image.

Conclusion

Ce qui précède explique comment utiliser JavaScript pour afficher des images de manière aléatoire. Il est simple et facile à comprendre, ne nécessite pas beaucoup de code et peut ajouter du plaisir et de l'interactivité à la page Web. Nous pouvons personnaliser le tableau d'images ou modifier le code pour obtenir des effets plus complexes. J'espère que cet article vous aidera à réaliser ce dont vous avez besoin.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!