Affichage aleatoire d'une image et rafraichissement automatique javascript et jquery

Dernière mise à jour le par @karamel .

Quelques lignes de Javascript et de jQuery vous suffiront pour afficher photos et images de façon aléatoire en rafraichissant l'ensemble à une cadence déterminée.
Utile pour une galerie photo ou faire défiler une série d'images automatiquement.

UNE GALERIE PHOTO jQuery ALEATOIRE

  • CONSIGNES
  • Votre page doit être liée une version de jQuery
  • Si ce n’est pas le cas, vous pouvez télécharger ce fichier ici

Ensuite, placez le code suivant entre les balises<head></head> :

<script type="text/javascript" src="jquery-version.js"></script>
  • HTML, jQuery, CSS

Collez ce code dans l’éditeur de votre choix et enregistrez le avec une extension de type .html ou .php à la racine de votre site.

<!doctype html>

<head>

<head>

<title>La plus simple des galerie photos en jQuery</title>



<style>



/*Style général de la page*/

body {font:14px verdana, sans-serif;background:#000000;color:#C0C0C0;font-weight:bold;overflow:hidden;}



/*Position de la galerie*/

#videg {position:absolute;left:30%;top:50%;cursor:pointer;}



/*Dimensionnement des images et fixation du z-index à 1 (Important)*/

#videg img {width:150px;height:150px;position:absolute;left:0;top:0;z-index:1}



/*Style des différents corps de texte de la page*/

#page {font:14px verdana, sans-serif;color:#C0C0C0;font-weight:bold;position:absolute;left:100px;top:100px;background:#000000;}



#mess {position:absolute;left:22%;top:80%;cursor:pointer;}

</style>


<script type="text/javascript" src="jquery-1.4.2.js"></script>







<script type="text/javascript">

//Evite les conflits avec d'éventuels autres plugins lies à la page

jQuery.noConflict();

//Implémentation des fonctions au chargement de la page

jQuery(document).ready(function() {

//Fonction retournant un nombre entier aléatoire entre 1 et 13
//13 étant le nombre d'images contenues dans dans la div

function rnd() {

    var nId =Math.floor(Math.random()*14);

    //Remise à 1 des z-index de toutes les images

    jQuery('#videg img').css("z-index",1);

    //L'image dont l'id est tiré de façon aléatoire voit son
    //z-index mis à 2. De ce fait, elle apparait au-dessus des autres.

    jQuery("#" + nId + "r").css("z-index",2);

         }

//Chargement de la fonction au lancement de la page

jQuery(function() {

    rnd();

    //Implémentation de la fonction toutes les 2 secondes

    setInterval("rnd();",2000);

            });

            

            

</script>

</head>

<body>

<p style="color:#C0C0C0;font-size:28px;">AFFICHAGE ALEATOIRE D'IMAGES !</p>    

<div id="page" >

<font style="color:#FFFF00">AFFICHEZ VOS PHOTOS AU HASARD<br>une galerie photo ultra-simple !!! </font><br>

Affichez le code source ou cliquez <a href="newsletter.php" style="color:#FFFF00;text-decoration:none">ici</a> pour recevoir le tutoriel par mail.<br><br>

</div>

<!--Div contenant les images-->

<div id="videg" />

<img id="1r" src="1.jpg" />

<img id="2r" src="2.jpg" />

<img id="3r" src="3.jpg" />

<img id="4r" src="4.jpg" />

<img id="5r" src="5.jpg" />

<img id="6r" src="6.jpg" />

<img id="7r" src="7.jpg" />

<img id="8r" src="8.jpg" />

<img id="9r" src="9.jpg" />

<img id="10r" src="10.jpg" />

<img id="11r" src="11.jpg" />

<img id="11r" src="12.jpg" />

<img id="12r" src="13.jpg" />

</div>

<br>

<div id="mess">AFFICHAGE ALEATOIRE D'IMAGES<br></div>

</body>

</html>
Ce document intitulé « Affichage aleatoire d'une image et rafraichissement automatique javascript et jquery » issu de CodeS SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Calendrier en javascript
Redéfinir les types
Rejoignez-nous