IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Contribuez Discussion :

Diaporama en 3 lignes de code


Sujet :

Contribuez

  1. #1
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut Diaporama en 3 lignes de code

    Je vous propose de réaliser un diaporama avec seulement 3 lignes de code JavaScript, c'est peu mais suffisant.

    Le principe
    On « empile », dans un conteneur, les éléments les uns sur les autres afin que seul le dernier soit visible à l'écran.
    Toutes les x secondes on déplace, « physiquement » dans le DOM, le premier élément en fin de conteneur, en gros on déplace celui du dessous en haut de la pile, c'est ce que fait la méthode Element.append().

    Un petit schéma pour visualiser :
    Nom : diapo-principe.png
Affichages : 231
Taille : 2,8 Ko
    et ainsi de suite ...

    Structure HTML
    On appliquera la structure suivante :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <div id="diapo" class="diapo-cadre">
      <img src="images/image_001.jpg" alt="">
      <img src="images/image_002.jpg" alt="">
      <img src="images/image_003.jpg" alt="">
      <img src="images/image_004.jpg" alt="">
    </div>

    CSS minimum
    Le CSS, hors cosmétique, se résume à :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .diapo-cadre {
      display: inline-block;
      position: relative;     /* pour servir de référent */
    }
    .diapo-cadre img {
      display: block;         /* supprime l'espace sous les images */
    }
    .diapo-cadre > * + * {    /* tous les enfants directs sauf le 1st */
      position: absolute;
      top: 0;
      left: 0;
    }
    Tous les éléments sont positionnés en absolu, et placés en haut à gauche, à l'exception du premier qui doit rester dans le flux pour donner une dimension au conteneur.

    Les 3 lignes de code
    Les bases sont posées, maintenant reste le code JavaScript à utiliser :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    function runDiaporama(idElement) {
      const elemDiapo = document.getElementById(idElement);
      elemDiapo.append(elemDiapo.firstElementChild);
      setTimeout(() => runDiaporama(idElement), 3000);
    }
    Il suffit d'appeler la fonction en passant l'ID de l'élément :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    runDiaporama("diapo");

    Voilà qui est suffisant pour réaliser un diaporama sur base de la manipulation du DOM.


    Démo en ligne
    Pour voir celui-ci en action et pour voir également les améliorations possibles, je vous invite à regarder la page en ligne :
    Diaporama en 3 lignes de code


    N’hésitez pas à proposer vos propres effets.

  2. #2
    Membre du Club
    Homme Profil pro
    Webmaster
    Inscrit en
    Décembre 2021
    Messages
    81
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 56
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Décembre 2021
    Messages : 81
    Points : 63
    Points
    63
    Par défaut
    Salut
    c'est superbe ces codes que tu m'as donné, ils vont tous me servir en fait

    Pour mon problème en fait je cherche à donner l'impression qu'un bouton clignote, j'ai deux images d'un bouton et je cherche à faire l'affichage alternatif des deux, je pense que ton premier code va bien m'aider pour ça

Discussions similaires

  1. [LG]Traduction de 5 lignes de code
    Par barthelv dans le forum Langage
    Réponses: 2
    Dernier message: 14/01/2005, 12h13
  2. Comptabiliser les lignes de code d'un projet
    Par JPigKeud dans le forum Qualimétrie
    Réponses: 5
    Dernier message: 07/01/2005, 15h09
  3. [Debutant(e)]ligne de code sous eclipse
    Par skywalker3 dans le forum Eclipse Java
    Réponses: 1
    Dernier message: 05/01/2005, 18h37
  4. [netbeans][Linux] Nombre de lignes de codes
    Par sylvain_neus dans le forum NetBeans
    Réponses: 5
    Dernier message: 13/08/2004, 11h09
  5. Calculeur de ligne de code
    Par Bernybon dans le forum Autres éditeurs
    Réponses: 9
    Dernier message: 05/03/2004, 17h29

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo