Bonjour à tous,

J'ai un petit problème de diaporama sur mon site.

J'ai insérer plusieurs diaporama dans une même page html que je fais fonctionner grâce à du jQuery pour afficher plusieurs épisodes d'une BD. On passe d'un épisode à l'autre grâce à des onglets (il n'y a qu'un seul épisode d'afficher à la fois sur la page). Dans un même épisode, le diaporama sert à afficher les différents planches de cet épisode.

Mon problème c'est que le premier diaporama marche très bien (quel que soit l'épisode que j'ai sélectionné en premier) mais une fois que je sélectionne un autre onglet, le diaporama fait n'importe quoi et ne fonctionne plus correctement.
Bon voilà, j'espère que j'ai été assez clair et si quelqu'un peut m'aider je lui en serait éternellement reconnaissant, c'est un problème sur lequel je bloque depuis pas mal de temps maintenant.
Je vous passe les codes pour les 2 premiers épisodes.

Le code html :

Code html : 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
<div id="bd">
 
	<img id="flechegauche" class="fleche" src="images/bd/fleche-gauche.png"/>
 
	<div id="episode1" class="episode">
		<img class="planche" id="planche10" src="images/bd/episode1/bd-episode1-1.PNG"/>
		<img class="planche" id="planche11" src="images/bd/episode1/bd-episode1-2.PNG" style="display: none"/>
		<img class="planche" id="planche12" src="images/bd/episode1/bd-episode1-3.PNG" style="display: none"/>
	</div>
 
	<div id="episode2" style="display: none" class="episode">
		<img class="planche" id="planche20" src="images/bd/episode1/bd-episode2-1.PNG"/>
		<img class="planche" id="planche21" src="images/bd/episode1/bd-episode2-2" style="display: none"/>
		<img class="planche" id="planche22" src="images/bd/episode1/bd-episode2-3.PNG" style="display: none"/>
		<img class="planche" id="planche23" src="images/bd/episode1/bd-episode2-4.PNG" style="display: none"/>
	</div>
 
				<img id="flechedroite" class="fleche" src="images/bd/fleche-droite.png" onclick="diapo()"/>
 
</div>
				<ul>
		<li id="menu-episode1" class="padding menu-episode">Episode 1</li>				
		<li id="menu-episode2" class="padding menu-episode">Episode 2</li>				
		<li id="menu-episode3" class="padding menu-episode">Episode 3</li>				
		<li id="menu-episode4" class="padding menu-episode">Episode 4</li>				
		<li id="menu-episode5" class="padding menu-episode">Episode 5</li>				
		<li id="menu-episode6" class="menu-episode">Episode 6</li>				
	</ul>
 
</nav>


Et le code jQuery :

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
// L'animation du diaporama qui permet de passer d'une planche à l'autre de droite à gauche pour l'épisode 1
function diapo(){
	i = 0;
	gestionFleches = function () {
            $('#flechegauche, #flechedroite').css('display', 'inline');
            if (i == 0) {
                $('#flechegauche').css('display', 'none');
            }
            if (i == 2) {
                $('#flechedroite').css('display', 'none');
            }
        };
 
		$('#flechedroite').on('click', function(){
 
			var actuel = '#planche1' + i;
			var next = '#planche1' + (i+1);
 
			$(actuel).css('display', 'none');
			$(next).css('display', 'inline');
 
			$('#croix').removeClass('bigcroix');
			$('#flechedroite').removeClass('rightflechedroite');
			$('#flechegauche').removeClass('leftflechegauche');
 
			$('img.planche').removeClass('bigplanche');
 
			i +=1;
			gestionFleches();
		});
 
		$('#flechegauche').on('click', function(){
 
			var actuel = '#planche1' + i;
			var pre = '#planche1' + (i-1);
 
			$(actuel).css('display', 'none');
			$(pre).css('display', 'inline');
 
			$('#croix').removeClass('bigcroix');
			$('#flechedroite').removeClass('rightflechedroite');
			$('#flechegauche').removeClass('leftflechegauche');
 
			$('img.planche').removeClass('bigplanche');
 
			i -= 1;
			gestionFleches();
		});
		gestionFleches();
}
 
// L'animation du diaporama qui permet de passer d'une planche à l'autre de droite à gauche	pour l'épisode 2
function diapo2(){
	i = 0;
	gestionFleches2 = function () {
            $('#flechegauche, #flechedroite').css('display', 'inline');
            if (i == 0) {
                $('#flechegauche').css('display', 'none');
            }
            if (i == 3) {
                $('#flechedroite').css('display', 'none');
            }
        };
 
		$('#flechedroite').on('click', function(){
 
			var actuel = '#planche2' + i;
			var next = '#planche2' + (i+1);
 
			$(actuel).css('display', 'none');
			$(next).css('display', 'inline');
 
			$('#croix').removeClass('bigcroix');
			$('#flechedroite').removeClass('rightflechedroite');
			$('#flechegauche').removeClass('leftflechegauche');
 
			$('img.planche').removeClass('bigplanche');
 
			i +=1;
			gestionFleches2();
		});
 
		$('#flechegauche').on('click', function(){
 
			var actuel = '#planche2' + i;
			var pre = '#planche2' + (i-1);
 
			$(actuel).css('display', 'none');
			$(pre).css('display', 'inline');
 
			$('#croix').removeClass('bigcroix');
			$('#flechedroite').removeClass('rightflechedroite');
			$('#flechegauche').removeClass('leftflechegauche');
 
			$('img.planche').removeClass('bigplanche');
 
			i -= 1;
			gestionFleches2();
		});
		gestionFleches2();
}
// L'animation lorque l'on clique sur l'onglet "épisode 1"
 
	$('#menu-episode1').on('click', function(){
 
		$(this).css('color', '#24629c');
		$('li').not(this).css('color', '#858585');
 
		$('#episode1').show(1000);
		$('#episode2').hide(1000);		
		$('#episode3').hide(1000);		
		$('#episode4').hide(1000);		
		$('#episode5').hide(1000);		
		$('#episode6').hide(1000);		
		diapo();
 
 
	});
 
// L'animation lorque l'on clique sur l'onglet "épisode 2"
 
	$('#menu-episode2').on('click', function(){
 
		$(this).css('color', '#24629c');
		$('li').not(this).css('color', '#858585');
 
		$('#episode1').hide(1000);
		$('#episode2').show(1000);		
		$('#episode3').hide(1000);		
		$('#episode4').hide(1000);		
		$('#episode5').hide(1000);		
		$('#episode6').hide(1000);		
		diapo2();		
 
	});
Voilà, j'espère que ce post n'est pas trop long.
Merci à tout ceux qui voudront bien y jeter un coup d'oeil.
Bonne soirée à tous !