diaporama vos avis

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 :D (càd difficilement modifiable) mais il fonctionne :mouarf:

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 :ccool:

code html des 4 box:

Code:

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:

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