L’affichage aléatoire d’images est une technique très répandue. Par exemple, des bannières aléatoires sont affichées. Lorsque vous accédez à un site Web, sa bannière est toujours différente, ou il y a toujours des conseils avec un contenu différent. Vous trouverez souvent de tels exemples lors de votre navigation sur Internet. Grâce à cette technologie, non seulement davantage de contenu peut être placé dans un certain espace, mais elle peut également donner aux utilisateurs l'illusion de mises à jour fréquentes.
À quel point êtes-vous excité ? En fait, tant que vous avez quelques connaissances de base en HTML et Javascript, tout est si simple. suivez-moi et jetons un coup d'œil à ses secrets aléatoires.
Commençons par un exemple simple. Habituellement, nous ajoutons des images à la page en utilisant <img src="picture">. Si nous voulons afficher aléatoirement 3 images différentes, nous devons apporter une petite modification à ce code. Tout d'abord, ajoutez la balise <script> :
Ce qui suit est un fragment cité :
<langage de script=javascript></script>
Ensuite, mettez <img src="picture"> dans cette balise en utilisant document.write(""), et cela devient
document.write("<img src=image>")
Terminons maintenant le paragraphe le plus critique :
Voici la citation :
identifiant=Math.round(Math.random()*2)+1
De cette façon, les nombres aléatoires sont obtenus comme 1, 2 et 3. Renommez l'image que vous souhaitez afficher en 1.gif, 2.gif, 3.gif, ok ! Le code final est :
Voici l’extrait de citation :
<langage de script=javascript>
identifiant=Math.round(Math.random()*2)+1
document.write("<img src="+id+".gif>")
</script>
Essayez-le, n'est-ce pas bon ? Et si chacune de mes images correspondait à un hyperlien ?
Supposons qu'il y ait 3 images, 1.gif, 2.gif, 3.gif, et que les liens correspondants soient url1, url2 et url3.
Afin d'avoir une correspondance biunivoque entre les images et les liens, nous devons configurer un tableau d'images pour placer l'adresse du lien, comme suit :
Ce qui suit est un fragment de référence :
var image = nouveau tableau (3)
image.longueur = 3
image[1]="url1"
image[2]="url2"
image[3]="url3"
Afin d'obtenir le lien correspondant à l'image, il faut également définir un tableau imageurl=image[id]
Le principe est le suivant :
Lorsque la page est lue, un nombre aléatoire est pris, en supposant qu'il soit 2, c'est-à-dire id=2, nous pouvons alors facilement afficher 2.gif sur la page comme ci-dessus. On peut alors voir : imageurl=image[2] et image[2]="url2", le reste est simple. Le code complet est le suivant :
Ce qui suit est un fragment cité :
<langage de script=javascript>
var image = nouveau tableau (3)
image.longueur = 3
image[1]="url1"
image[2]="url2"
image[3]="url3"
identifiant=Math.round(Math.random()*2)+1
imageurl=image[identifiant]
document.write("<a href="+bannerurl+">"+"<img src="+id+".gif>")
</script>
Réimprimé de : Seven Color Bird Design --- pc-king