Bonjour,
J'ai une page html avec 4 box qui contiennent 3 images. Je voudrais les afficher tour à tour pendant 1 sec. J'ai donc écrit un petit script js dans ce but. Mais je le trouve... laid (càd difficilement modifiable) mais il fonctionne
Je débute en javascript et le but de mon post est d'obtenir vos avis/conseils pour m'améliorer, svp.
d'avance un grand merci
code html des 4 box:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4 <span id="box1" class="visible"><img src="./images/marque/nuxe.jpg"/><img src="./images/marque/nuxe.jpg"/><img src="./images/marque/nuxe.jpg"/></span> <span id="box2" class="hidden"><img src="./images/marque/nuxe.jpg"/><img src="./images/marque/bioderma.jpg"/><img src="./images/marque/nuxe.jpg"/></span> <span id="box3" class="hidden"><img src="./images/marque/bioderma.jpg"/><img src="./images/marque/nuxe.jpg"/><img src="./images/marque/bioderma.jpg"/></span> <span id="box4" class="hidden"><img src="./images/marque/bioderma.jpg"/><img src="./images/marque/bioderma.jpg"/><img src="./images/marque/bioderma.jpg"/></span>
code js
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58 function myFunction() { // Initialisation, on commence avec le 2eme box puisque le 1er est affiché par defaut var ii = "2"; // Lancement de la fonction setInterval(function(){ii=imageDisplayRotation(ii)}, 2000); } function imageDisplayRotation (i) { // initialisation de i (lié au box a afficher) if (i == null) { i='1'; } // initialisation de j (lié au box a cacher) var j = parseInt(i)-1; if (j < '1') { j = '4'; } // On cache j var boxToBeHidden="box"+j; setClass(boxToBeHidden, "hidden"); // On affiche i var boxToBeVisible= "box"+i; setClass(boxToBeVisible, "visible"); boxToBeHidden = boxToBeVisible; boxToBeVisible = 'box'+i; // On incrémente pour la prochaine passe i=parseInt(i)+1; // On limite à 4 box if (parseInt(i)>4) { i=1; } return i; } function setClass(elementId,class1) { /*On recupere l'element html dans le document*/ var e = document.getElementById(elementId); /*Si on a trouver l'element on modifie sa classe css*/ if(e != null) { e.className = class1; return true; } /*On a pas trouver l'element c'est un echec*/ return false; }
Partager