Discussion :

[NoSmoking]

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 :

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.

[Programir]

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

[Dylav]

À la recherche d'un mécanisme de diaporama à la fois simple (code HTML, code CSS, code JavaScript) et agréable à utiliser, j'ai débusqué cette excellente solution de NoSmoking, qui répond presque intégralement à mes attentes,

• le code HTML est on ne peut plus concis,
• le code CSS l'est aussi (et je ne suis d'ailleurs pas certain d'en comprendre toutes les subtilités, mais il est d'une efficacité remarquable),
• le code JavaScript (de la page de présentation, où l'on n'est bien sûr plus en 3 lignes) est - pour moi - assez compréhensible, et j'ai même réussi à l'adapter (étonnant, chez moi qui ne réussis absolument pas à pratiquer ce langage).

J'ai donc remplacé les deux boutons start/stop par un bouton unique (cf. code ci-dessous). Et je souhaiterais carrément le faire disparaître.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// gestion du bouton start/stop
 
const oBtns = document.querySelectorAll("button");
oBtns.forEach((btn) => {
  let action = btn.dataset.action;
 
  btn["on" == action ? "removeAttribute" : "setAttribute"]("disabled", "disabled");
 
  btn.addEventListener("click", (e) => {
    const idDiapo = btn.dataset.diapo;
    if ("on" == action) {
      runDiaporama(idDiapo);
      btn.nextElementSibling?.removeAttribute("disabled");
      action = "off";
    }
    else {
      stopDiaporama(idDiapo);
      btn.previousElementSibling?.removeAttribute("disabled");
      action = "on";
    }
  })
})
 
function runDiaporama(idElement) {
  const elemDiapo = document.getElementById(idElement);
  clearTimeout(elemDiapo._timer);
  elemDiapo.append(elemDiapo.firstElementChild);
  elemDiapo.innerTimer = setTimeout(() => runDiaporama(idElement), 3000);
}
function stopDiaporama(idElement) {
  const elemDiapo = document.getElementById(idElement);
  clearTimeout(elemDiapo.innerTimer);
}

Je m'explique. Les images du diaporama que je souhaite créer remplissent la totalité de l'écran. C'est pour cela que j'ai installé le bouton sur l'image (en haut à gauche, grâce à l'attribut z-index). Un premier clic déclenche le diaporama, et le suivant l'arrête, etc.

Je voudrais dématérialiser le bouton, et pouvoir cliquer n'importe où sur l'image pour déclencher/arrêter le déroulement du diaporama (l'attribut title de l'image suffirait à en faire comprendre le fonctionnement).

Mais je suis parvenu à mes limites, et ne trouve pas la solution. Est-ce possible et, si oui, comment ?

Merci d'avance de m'éclairer.

[NoSmoking]

j'ai débusqué cette excellente solution de NoSmoking, qui répond presque intégralement à mes attentes,

J'ai donc remplacé les deux boutons start/stop par un bouton unique (cf. code ci-dessous). Et je souhaiterais carrément le faire disparaître.

Dans ce cas il te faut mettre l'écouteur directement sur le conteneur et basculer un état à chaque clic, cela peut se gérer simplement avec l'ajout/retrait d'une classe CSS par exemple.

En substance cela se traduirait par le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
"use strict";
const DIAPO_DELAI = 3000;
const DIAPO_ID = "diapo-fade";
const DIAPO_ACTIF = "diapo-actif";
 
function runDiaporama(idElement) {
  const elemDiapo = document.getElementById(idElement);
  elemDiapo.append(elemDiapo.firstElementChild);
  elemDiapo.innerTimer = setTimeout(() => runDiaporama(idElement), DIAPO_DELAI);
}
 
const diapo = document.getElementById(DIAPO_ID);
diapo.addEventListener("click", (e) => {
  if (diapo.classList.contains(DIAPO_ACTIF)) {
    clearTimeout(diapo.innerTimer);
  }
  else {
    runDiaporama(DIAPO_ID);
  }
  diapo.classList.toggle(DIAPO_ACTIF);
})
// lance le diaporama
setTimeout(() => diapo.click(), DIAPO_DELAI);

À toi de jouer.

[Dylav]

Tout d'abord merci pour ta réactivité.
Merci aussi pour ta solution qui répond (presque) exactement à mon souhait.
Juste un petit détail : c'est bien l'avant-dernière image de la pile qui s'affiche (comme prévu). Mais le diaporama ne démarre pas tout seul : il faut cliquer sur l'image pour le démarrer. Peut-on y faire quelque chose ?

[NoSmoking]

Mais le diaporama ne démarre pas tout seul : il faut cliquer sur l'image pour le démarrer. Peut-on y faire quelque chose ?

c'est ce que fait cette ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
// lance le diaporama
setTimeout(() => diapo.click(), DIAPO_DELAI);