Comment afficher des images dans un ordre aléatoire à l’aide de JavaScript

Posté Par: Windows2022tutosur: décembre 08, 2022Dans: TechPas De Commentaires

Comment afficher des images dans un ordre aléatoire à l’aide de JavaScript

Introduction

Dans ce tutoriel, nous allons créer un Comment afficher des images dans un ordre aléatoire à l’aide de JavaScript. L’objectif de ce didacticiel est d’apprendre à randomiser les images affichées. Cela couvrira toutes les fonctions importantes qui fournissent l’affichage aléatoire de l’image. Je vais fournir un exemple de programme pour montrer le codage réel de ce tutoriel.

Ce tutoriel est simple et facile à comprendre, il suffit de suivre les instructions que j’ai fournies et vous pouvez le faire sans problème. Ce programme peut être utilisé pour tout type de système qui a besoin de présenter une galerie d’images. Je ferai de mon mieux pour vous fournir le moyen le plus simple de créer ce programme Afficher l’image dans un ordre aléatoire. Faisons donc le codage.

Avant de commencer :

Ceci est le lien pour le modèle que j’ai utilisé pour la conception de la mise en page https://getbootstrap.com/.

Création de l’interface

C’est ici que nous allons créer une interface simple pour notre application. Ce code affichera le support d’image et le bouton. Pour le créer, copiez-le simplement et écrivez-le dans votre éditeur de texte, puis enregistrez-le sous index.html.

<!DOCTYPE html>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<a class="navbar-brand">Sourcecodester</a>
	<div class="col-md-6 well">
		<h3 class="text-primary">How to Display Images in a Random Order using JavaScript</h3>
		<hr style="border-top:1px dotted #ccc;"/>
		<div id="result" style="padding:30px;"></div>
		<button class="btn btn-primary" type="button" onclick="shuffle()">Random</button>

Création d’une fonction JavaScript

C’est là que se trouve la fonction principale de l’application. Ce code vous permettra de randomiser dynamiquement l’ordre des images. Pour ce faire, copiez et écrivez simplement ce bloc de codes dans l’éditeur de texte et enregistrez-le sous script.js.

shuffle();
 
 
 
function shuffle(){
	var arr = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg", "image6.jpg"];
	var html = "";
	shuffleArray(arr).forEach(function(item){
		html += "<img src="https://www.sourcecodester.com/tutorial/javascript/15929/images/"+item+"" width="170" height="150" style="margin:10px; float:left;">";
	})
	html += "<br style="clear:both;"/>";
 
	document.getElementById('result').innerHTML = html;
}
 
function shuffleArray(arr) {
    for (var i = , shuffled = [], randomIndex = ; i < arr.length; i++) {
        randomIndex = Math.floor(Math.random() *  arr.length);
        while (shuffled.indexOf(arr[randomIndex]) !== -1) {
            randomIndex = Math.floor(Math.random() *  arr.length);
        }
       shuffled.push(arr[randomIndex]);
    }
 
	return shuffled;
}

Dans la première ligne de code, vous remarquez que nous appelons déjà la méthode d’affichage d’images aléatoires appelée mélanger(). Dans la première méthode que nous créons, nous définissons uniquement certaines variables qui contiendront l’image sous forme de tableau et afficheront le contenu HTML. Nous avons maintenant appelé le shuffleArray() c’est la méthode que nous avons codée. Cette méthode contient la logique de randomisation des images. Pour le démarreur, il contient différentes boucles et utilise une fonction aléatoire appelée Math.étage()qui randomisera une certaine valeur ou index.

Production:

La Comment afficher des images dans un ordre aléatoire à l’aide de JavaScript le code source que je fournis peut être téléchargé ci-dessous. Veuillez cliquer sur le bouton de téléchargement.

Voilà, nous avons créé avec succès Comment afficher des images dans un ordre aléatoire à l’aide de JavaScript. J’espère que ce tutoriel simple vous aidera à ce que vous recherchez. Pour plus de mises à jour et de tutoriels, veuillez simplement visiter ce site. Profitez du codage !

Plus de tutoriels pour le langage JavaScript

Tutoriels JavaScript

Télécharger ici