Slideshow simple en Jquery

Version imprimable

Bonjour,

J' ai créé un Slideshow simple avec bouton précédent et suivant, mais je n' arrive pas à créer un bouton précédent .

Voici le code html:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="slideshow">
  <div class="slide">
     <div class="mini"></div>
     <div class="mini"></div>
     <div class="mini"></div>
  </div>
 <div class="slide">
     <div class="mini"></div>
     <div class="mini"></div>
     <div class="mini"></div>
  </div>
 <div class="slide">
     <div class="mini"></div>
     <div class="mini"></div>
     <div class="mini"></div>
  </div>
 
</div>
<input type="submit" value="précédent" id="prev" />
<input type="submit" value="suivant" id="next" />

Le css :

Code:

1
2
3
4
5
6
7
8
9
.slide {
float:left;
}
.visible {
display:block;
}
.hidden {
display:hidden;
}

Le code Jquery

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
59
60
61
62
63
64
65
 
 
$("#slideshow .slide:first-child;").removeClass("hidden");
$("#slideshow .slide:first-child;").addClass("visible");
 
var long = $(".slide").length;
var compt = 1;
 
$("#next").click(function() {
 
//Si le compteur est inférieur aux nombres d' éléments div.slide
if (compt<long) {
//On détermine le div courant, celui qui a une classe .visible
current=$("#minis .slide.visible");
 
//On détermine le prochain div.slide
next=current.next();
 
//On cache le div.slide courant
current.addClass("hidden");
current.removeClass("visible");
 
//On montre le suivant
next.addClass("visible");
next.removeClass("hidden");
 
//On ajoute une classe .pointeur au slide suivant
next.addClass("pointeur");
 
//On ajoute une classe prev au courant
current.addClass("prev");
current.removeClass("pointeur");
 
//On incrémente le compteur
compt++;
}	
});
 
 
 
$("#prev").click(function() {
//Si le compteur est supérieur à 1
if (compt>1) {
 
//On détermine le div.slide courant et le précédent grâce aux classes //appliquées avec le bouton suivant
current=$("#slideshow .pointeur");
prev=$("#slideshow .prev:last-child");
 
//On rend le div.slide courant caché, on enlève la classe pointeur 
current.addClass("hidden");
current.removeClass("visible");
current.removeClass("pointeur");
 
//On montre le précédent, et on lui ajoute la classe pointeur, on lui ôte la classe prev
prev.addClass("visible");
prev.removeClass("hidden");
prev.removeClass("prev");
prev.addClass("pointeur");
 
 
//On décrémente le compteur
compt--;
}
 
});

Le bouton suivant marche très bien, par contre je n' arrive pas à faire marcher le précédent.

Le principe est le suivant:

On trouve le dernier div.prev créé avec le bouton suivant ( last-child), et on le rend visible, et on rend le div.pointeur visible. Mais ça ne marche pas, je dois me tromper quelque part. Le résultat est que tout les slides deviennent invisibles.

Avez-vous une solution?

Bonsoir.

Voici un exemple qui "marche" mais... il est tard, je suis fatigué, je ne suis pas sûr que ce soit la meilleure solution.

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
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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <link rel="stylesheet" type="text/css" href="../styles/principal.css" media="screen" />
    <style type="text/css">
        div#affiche {
            margin:12px;
            border:1px solid #999999;
        }
        .slide {
 
        }
        .visible {
            display:block;
        }
        .hidden {
            display:none;
        }
    </style>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#slideshow .slide:first-child;").removeClass("hidden").addClass("visible");
 
            var long = $(".slide").length;
            var compt = 1;
            var current = null;
            var next = null;
            var prev = null;
 
            $("#next").click(function() {
 
                if (compt < long) {
 
                    current = $(".slide.visible");
 
                    prev = current;
 
                    next = $(current).next();
 
                    $(current).addClass("hidden").removeClass("visible");
 
                    $(next).addClass("visible").removeClass("hidden");
 
                    //debug
                    console.log((prev[0] != null) + ', ' + (current[0] != null) + ', ' + (next[0] != null));
 
                    compt++;
                }
            });
 
            $("#prev").click(function() {
 
                if ((compt > 1) && (next != null) && (current != null) && (prev != null)) {
 
                    $(next).addClass("hidden").removeClass("visible");
 
                    $(prev).addClass("visible").removeClass("hidden");
 
                    next = current;
 
                    current = prev;    
 
                    prev = $(current).prev();
 
                    //debug
                    console.log((prev[0] != null) + ', ' + (current[0] != null) + ', ' + (next[0] != null));
 
                    compt--;
                }
            });
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <div id="slideshow">
            <div class="slide hidden">
                <div class="mini">1</div>
                <div class="mini">2</div>
                <div class="mini">3</div>
            </div>
            <div class="slide hidden">
                <div class="mini">4</div>
                <div class="mini">5</div>
                <div class="mini">6</div>
            </div>
            <div class="slide hidden">
                <div class="mini">7</div>
                <div class="mini">8</div>
                <div class="mini">9</div>
            </div>
        </div>
        <input type="submit" value="précédent" id="prev" />
        <input type="submit" value="suivant" id="next" />
        <div id="affiche"></div>
    </div>
</body>
</html>

12/06/2009, 14h36
sibile

Bonjour,

Merci mais chez moi le bouton précédent ne marche toujours pas.

Par contre la syntaxe est plus rapide !

Merci beaucoup
12/06/2009, 19h22
danielhagnoul

Bonsoir, chez moi cela fonctionne. Évidemment, le bouton précédent n'est disponible qu'après avoir fait d'abord un suivant. Sinon les « next, curent et prev » sont nuls puisqu'il n'y a pas encore d'élément « prev » référencé.