Javascript+Css3 Incompatibilité Display//Machine d'etat pour Diaporama

**Liomenos** · 25/05/2012, 08h32

Quelque semaines ont passé depuis que je n'ai pas eut besoin de passer poser un petit post sur ce forum et j'ai bien avancé sur mon projet et dans mon apprentissage du Java Script et du CSS 3.

Mais voila... Après 4 heures à plancher sur un problème qui se dresse devant moi, j'abandonne pour la deuxième fois et viens recourir votre aide.

Encore une fois, je n'ai pas le droit d'utiliser le PHP, pop-up et cookie.

Voici mon problème:

Le site que je crée possède des pages divisées en plusieurs div qui se cachent ou s'ouvrent en fonction de l'appui sur un bouton. Sur une de ses div, je souhaiterais insérer un diaporama contenant trois images qui ne sont pas extrêmement lourdes et qui est censé tourner en boucle le temps que l'utilisateur se balade sur la page.

Au début, j'ai commencé par l'initialiser au démarrage de la page mais je me suis vite rendu compte que (sauf dans le cas où l'arrivée sur la page se faisait avec la div du diaporama) le diaporama restait sur une seule des trois images. De plus dans le cas où l'arrivée sur la page se faisait avec la div du diaporama, tout allait bien jusqu'au moment où on changait de div pour revenir par la suite, et la... TADAM ... mon diaporama freeze...

Bon du coup j'ai tenté de ré-initialiser mon diaporama à chaque fois que je reviens sur la div mais ça ne marche pas pour autant (par contre, en arrivant directement sur la div en utilisant #para2 à la fin du truc, ça marche, enfin jusqu'à ce que je change de div).

J'offre un peu de code pour vous permette de vous aider à m'aider.

JavaScript :

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
x=1;///!\Laissez a 1 ////x correspond au numéro de page ou se trouve l'utilisateur.
xmax=7;/// ICI mettre le nombre de page de la note d'application!
xmin=1;	///!\Laissez a 1 //
 
 
//Cette fonction est utile dans le cadre de l'index des questions. 
//Elle permet à  l'utilisateur a ne pas avoir a cliquer 2 fois sur la question .
window.onload=function(){	// Lancement de la fonction au démarrage de la page				
var lloc = location.hash; 		// Récupère l'ancre dans le lien ( #para1//#para2//#para3//ect) et l'inclu dans la variable h
for(i=xmin;i<=xmax;i++){	// Boucle For pour comparer ensuite la variable h avec les ancres disponible sur la page
       if(lloc==("#para"+i)){		// Si la comparaison réussi ; i est récupérer pour l'utiliser dans la fonction gotodiv(i) ;
		gotodiv(i);			// Voir plus haut pour une explication de cette fonction
		}
	}		
if(x==2){					//Le diaporama se situe page 2 ;)
	lancediapo();				//fonction pour lancer le diaporama
	}
}
//Fonction activant le diaporama page 2
function lancediapo(){
	D3 = 1;	//Gere l'opaciter de l'image correspondant a Screen2
	D2 = 0;	//Gere l'opaciter de l'image correspondant a Screen3
	SW = 1;	//Init machine d'etat
	var NA9D3={//Objet div Screen3
		'div': document.getElementById('Screen2'),//Relation avec la div
		'opa': function(){
			this.div.style.opacity = D3;//Fontion permettant de changer l'opacité de D3
		}
	}
	var NA9D2={	//Objet div Screen2
		'div': document.getElementById('Screen3'),//Relation avec la div
		'opa': function(){
			this.div.style.opacity = D2;//Fontion permettant de changer l'opacité de D2
		}
	}
		NA9D2.opa();//Lancement de la premiere transition
		NA9D3.opa();//Lancement de la premiere transition
	var navigatorsProperties=['transitionend','OTransitionEnd','webkitTransitionEnd'];//Recuperatioon des events fin de transition
		for(var a in navigatorsProperties)
		{
			NA9D2.div.addEventListener(navigatorsProperties[a],function(e){	//Mise en ecoute des events 
				SW= D3+D2;//Calcule machine d'état
				switch(SW){
					case 0:
						D3=1;D2=0;
						break;
					case 1:
						D3=1;D2=1;
						break;
					case 2:
						D3=0;D2=0;
						break;
				}
			NA9D2.opa();
			NA9D3.opa();//Lancement de la transition
			},false);
			NA9D3.div.addEventListener(navigatorsProperties[a],function(e){	//Mise en ecoute des events 
				SW= D3+D2;//Calcule machine d'état
				switch(SW){
					case 0:
						D3=1;D2=0;
						break;
					case 1:
						D3=1;D2=1;
						break;
					case 2:
						D3=0;D2=0;
						break;
				}
			NA9D2.opa();//Lancement de la transition
			NA9D3.opa();//Lancement de la transition
			},false);	
 
		}
}
 
//Cette fonction permet de cacher tout les paragraphes et d'activer le paragraphe #para"a"; utile pour atteindre un para éloigner
function gotodiv(a){				//Cette fonction permet de cacher tout les paragraphes et d'activer le paragraphe #para"a"
if(a!=0){						//Dans le cas où a=0 cela permet de ne pas modifier x, c'est à dire permet de venir  
	x=a;						//et retourner d'une page voc sans avoir a changer x. 
}
for(i=xmin; i<=xmax ; i++){
	document.getElementById("para"+i).style.display = "none";		//Cache les paragraphes non voulu.
}
	document.getElementById("parav").style.display = "none";		//Cache le paragraphe de vocabulaire.
	document.getElementById("parap").style.display = "block";		//Active la fleche gauche.
	document.getElementById("paras").style.display = "block";		//Active la fleche droite.
	if(x==xmax){	                         				//Vérifie si la page est la derniere.
		document.getElementById("paras").style.display = "none";	//Si nous sommes sur la derniere page,
	}                           						//la fleche de droite est cacher.
	if(x==xmin){								// Vérifie si la page est la premiere
		document.getElementById("parap").style.display = "none";	//Si nous sommes sur la premiere page,
	}									//La fleche gauche est cacher.
	document.getElementById("para"+x).style.display = "block";		//Active le paragraphe souhaité
	$('html,body').animate({scrollTop: 0}, 'slow');				//Remonte en haut de la page.
	if(x==2){								//Le diaporama se situe page 2 ;)
		lancediapo();							//fonction pour lancer le diaporama
	}
}
 
Css :
#Screen1{
	width: 640px;
	height: 480px;
	opacity : 1;
	border-top: 1px solid #103057;
	background: url('NA9D1.jpg');
}
#Screen2{
	width: 640px;
	height: 480px;
	background:url('NA9D3.jpg');
	opacity : 0;
 
	-webkit-transition: all 10000ms cubic-bezier(0.600, -0.280, 0.735, 0.045); 
	-moz-transition: all 10000ms cubic-bezier(0.600, -0.280, 0.735, 0.045); 
    -ms-transition: all 10000ms cubic-bezier(0.600, -0.280, 0.735, 0.045); 
    -o-transition: all 10000ms cubic-bezier(0.600, -0.280, 0.735, 0.045); 
    transition: all 10000ms cubic-bezier(0.600, -0.280, 0.735, 0.045); 
}
#Screen3{
	width: 640px;
	height: 480px;
	background:url('NA9D2.jpg');
	opacity : 0;
 
	-webkit-transition: all 10000ms cubic-bezier(0.600, -0.280, 0.735, 0.045); 
	-moz-transition: all 10000ms cubic-bezier(0.600, -0.280, 0.735, 0.045); 
	-ms-transition: all 10000ms cubic-bezier(0.600, -0.280, 0.735, 0.045); 
    -o-transition: all 10000ms cubic-bezier(0.600, -0.280, 0.735, 0.045); 
    transition: all 10000ms cubic-bezier(0.600, -0.280, 0.735, 0.045); 
}
 
Html :
 
[.....]
<div id="para2" style="display:none;">
     <div id="Screen1">
            <div id="Screen2">
                     <div id="Screen3">
                      </div>
               </div>
        </div>
</div>
<div id="para3" style="display:none;">
                         [.....]