Salut à tous !

Je débute en jQuery et j'ai un petit problème :

J'essaie de faire une sorte de diaporama d'images avec lequel on peut passer d'une image à une autre en cliquant sur une flèche (qui est aussi une image). Jusqu'ici tout va bien, la première fois que je clique sur la flèche, la deuxième image remplace bien la première. Mais après, plus rien ! J'ai beau cliquer sur la flèche, mais le code ne s’exécute plus et l'image reste la même.

Voici mon code HTML :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
<img id="flechegauche" class="fleche" src="images/bd/fleche-gauche.png"/>
<div id="episode1">
    <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>
<img id="flechedroite" class="fleche" src="images/bd/fleche-droite.png"/>
<script src="jquery/jquery.js"></script>
<script src="jquery/bd.js"></script>

Et le 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
i = 0;
if(i==0){
    $('#flechegauche').css('display', 'none');
}
if(i==2){
    $('#flechedroite').css('display', 'none');
}
var actuel = '#planche1' + i;
var next = '#planche1' + (i+1);
var pre = '#planche1' + (i-1);
$('#flechedroite').on('click', function(){
    $(actuel).css('display', 'none');
    $(next).css('display', 'inline');
    $('#flechegauche').css('display', 'inline');
});
$('#flechegauche').on('click', function(){
    $(actuel).css('display', 'none');
    $(pre).css('display', 'inline');
    $('#flechedroite').css('display', 'block');
});
Donc je voudrais faire en sorte que le code s'exécute, peut importe l'image sur laquelle je suis, mais je ne vois pas comment faire.

Pourriez-vous m'aider ?

Merci à tous et bonne fête de fin d'année !