Bonsoir,
J'ai suivi un tuto (tres bon tuto) sauf que j'ai un soucis : erreur d'analyse de la valeur "left". Declaration abandonnée
voila mes pages (pages de testes):
index :
css :
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 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <link rel="stylesheet" media="screen" type="text/css" href="design.css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="js.js"></script> <title>Insert title here</title> </head> <body> <div id="centre"> <div class="slide"> <?php for ($i=0; $i<15; $i++){?> <a href="#"> <img src="fond.jpg"> </a> <?php }?> </div> <div class="prec">div> <div class="suiv">div> </div> </body> </html>
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 @CHARSET "ISO-8859-1"; BODY, DIV, FORM, FIELDSET { margin: 0; padding: 0; } #centre { position:relative; width: 800px; overflow: hidden; } .prec { position:absolute; top: 0; left:0; height: 300px; width: 60px; background: url(precedent0.png) no-repeat center left; } .suiv { position:absolute; top: 0; right:0; height: 300px; width: 60px; background: url(suivant0.png) no-repeat center right; } .slide { width: 10000px; } .slide a{ display:block; float: left; padding: 0 20px; } .slide a img{ padding: 20px; }
J'ai deja posé la question sur le tuto mais vu la date de la derniere question qui remonte a 2mois et a laquelle il n'y a pas eu de reponse ...
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 $(document).ready(function() { $(".suiv").mouseover(function () { $(".suiv").css({background: 'url(suivant.png) no-repeat center right'}); }); $(".suiv").mouseout(function () { $(".suiv").css({background: 'url(suivant0.png) no-repeat center right'}); }); $(".prec").mouseover(function () { $(".prec").css({background: 'url(precedent.png) no-repeat center right'}); }); $(".prec").mouseout(function () { $(".prec").css({background: 'url(precedent0.png) no-repeat center right'}); }); $(".suiv").mousedown(function () { $(".suiv").css({background: 'url(suivant1.png) no-repeat center right'}); }); $(".suiv").mouseup(function () { $(".suiv").css({background: 'url(suivant.png) no-repeat center right'}); }); $(".prec").mousedown(function () { $(".prec").css({background: 'url(precedent1.png) no-repeat center right'}); }); $(".prec").mouseup(function () { $(".prec").css({background: 'url(precedent.png) no-repeat center right'}); }); }); $(document).ready(function() { s = new slider("#centre"); }); var slider = function(id){ var self = this; this.div = $(id); this.slider = this.div.find(".slide") this.largeurCache = this.div.width(); this.largeur = 0 this.div.find('a').each(function() { self.largeur += $(this).width(); self.largeur += parseInt($(this).css("padding-left")); self.largeur += parseInt($(this).css("padding-right")); self.largeur += parseInt($(this).css("margin-left")); self.largeur += parseInt($(this).css("margin-right")); }); this.prec = this.div.find(".prec"); this.suiv = this.div.find(".suiv"); this.slid = this.largeurCache/2; this.nbSlid = Math.ceil(this.largeur/this.slid); this.current = 0; this.suiv.click(function() { self.current++; self.slider.animate({ 'left' : -self.current*this.slid },1000); }); this.prec.click(function() { self.current++; self.slider.animate({ 'right' : -self.current*this.slid },1000); //alert(this.nbSlid); };
Je vous remercie d'avance pour votre aide !
Ps : si vous pouriez me conseiller un logiciel de developpement web (je me sers de notepad++ ainsi que eclipse PHP).
Partager