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;
}