slider (bouton bas et haut)
Bonjour tout le monde,
Je viens vers vous pour avoir quelques pistes coup de pouce...
Voilà je souhaite réaliser une galerie, il y à 32 images à mettre donc je souhaite faire une galerie avec un slide verticale.
J'ai deux boutons qui me servent pour monter ou descendre.
J'ai réalisé le hmlt et css et maintenant je me perds un peu voir beaucoup sur le javascript... Ce que j'ai fais ne fonctionne pas (j'ai réussi à faire en sorte que le bouton bas fonctionne, mais je ne sais pas ce que j'ai touché, mais il ne fonctionne plus. Le problème lorsqu'il fonctionné c'était qu'il ne s'arrêter pas une fois la dernière image affichée...
je vous joins mon code html css et javascript pour que vous puissiez me dire ce qui ne va pas dans mon code. Je vous remercie
html:
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
| <div id="galerie">
<aside>
<div class="haut"></div>
<div class="bas"></div>
</aside>
<div class="slider">
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
</div>
</div>
</section> |
le css concerné :
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
| #galerie {
width:800px;
margin-top: 30px;
float:left;
height: 500px;
overflow:hidden;
margin-bottom:20px;
position:relative;
}
#galerie img {
margin: 5px 5px;
}
.haut {
background-image:url(img/prec.png);
width: 20px;
height:20px;
margin-bottom:10px;
margin-left: 25%px;
margin-right:20px;
position:absolute;
}
.haut:hover {
background-image:url(img/suivant.png);
width: 20px;
height:20px;
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.bas {
background-image:url(img/prec.png);
width: 20px;
height:20px;
margin-left: 4.2%;
position:absolute;
margin-right:20px;
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.bas:hover {
background-image:url(img/suivant.png);
width: 20px;
height:20px;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.slider {
height: 50000px;
clear:both;
float:left;
margin-top:20px;
position:absolute;
} |
et pour finir le javascript :
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
| $(document).ready(function(){
s = new slider("#galerie");
});
var slider = function(id) {
self=this;
this.div = $(id);
this.slider=this.div.find(".slider");
this.hauteurCache = this.div.height();
this.hauteur=0;
this.div.find( 'a').each(function(){
self.hauteur+=$(this).height();
});
this.haut = this.div.find(".haut");
this.bas = this.div.find(".bas");
this.saut = this.hauteurCache/2;
this.nbEtapes = Math.ceil(this.haureur/this.saut - this.hauterCache/this.saut);
this.courant=0;
this.bas.click(function(){
if(self.courant==this.nbEtapes){
self.courant++;
self.slider.animate({
top: -self.courant*self.saut
},1000);
}
});
this.haut.click(function(){
if(self.courant>0){
self.courant++;
self.slider.animate({
top: -self.courant*self.saut
},1000);
}
});
} |
J'ai réussi à en arriver jusque là grâce à des information et différents tutoriels, mais je sèche maintenant...
Pourriez-vous me donner un coup de main et me dire qu'est-ce qu'il ne va pas dans mon code JavaScript ?
Merci !
