Bonjour,
Null en Javascript, j'ai trouvé sur internet un petit Slider simple que j'ai implémenté sur mon site et qui marchait très bien.
Je ne crois pas avoir modifié quoique ce soit dans cette partie, mais toujours est-il que le slider ne fonctionne plus, en fait le script ne démarre pas !
Pouvez vous m'indiquer où est le problème ?
Merci
Voici le programme HTML et les CSS et Javascript associés
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
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 <table> <tr> <div id="head_slider"> <div id="head_slider_fleche_gauche"></div> <div id="head_slider_fleche_droite"></div> <div id="head_slider_content_list"> <div id="head_slider_content"> <object width="820" data="image1.jpg" type="image/jpg"></object> <object width="820" data="image2.jpg" type="image/jpg"></object> <object width="820" data="image3.jpg" type="image/jpg"></object> <object width="820" data="image4.jpg" type="image/jpg"></object> </div> </div> </div> </tr> </table> <script type="text/javascript"> var idcr = 1; $(document).ready(function(){ alert('script lancé'); slider.init(); slider.play_defil(); }); slider = { init: function(){ slider.elem = $("#head_slider_content"); slider.nbSlide = slider.elem.find("object").length; slider.current = 0; $("#head_slider_fleche_droite").click(function() { slider.next(); }); $("#head_slider_fleche_gauche").click(function() { slider.prev(); }); $("#head_slider").mouseover(function() { slider.stop_defil(); }); $("#head_slider").mouseout(function() { slider.play_defil(); }); }, next: function(){ slider.current++; if (slider.current > slider.nbSlide-1) { slider.current = 0; slider.elem.stop().animate({marginLeft:"0pox"}); } else { slider.elem.stop().animate({marginLeft:-slider.current*820+"px"}); } }, prev: function(){ slider.current--; if (slider.current < 0) { slider.current = slider.nbSlide-1; } slider.elem.stop().animate({marginLeft:-slider.current*820+"px"}); }, suiv: function(){ if (idcr>0 & slider.current == slider.nbSlide-1) { idcr=-1; } else if (idcr<00 & slider.current == 0) { idcr=1; } slider.current = slider.current + idcr; slider.elem.stop().animate({marginLeft:-slider.current*820+"px"}); }, play_defil: function(){ slider.timer = window.setInterval("slider.suiv()",5000); }, stop_defil: function(){ window.clearInterval(slider.timer); } } </script> <style type="text/css"> #head_slider { height:500px; width:1000px; margin-left: auto; margin-right: auto; } #head_slider_fleche_droite { background:url(./ressources/fleche_droite.png) no-repeat; float:right; height:65px; width:40px; position: relative; top: 50%; transform: translateY(-50%); } #head_slider_fleche_gauche { background:url(./ressources/fleche_gauche.png) no-repeat left; float:left; height:65px; width:40px; position: relative; top: 50%; transform: translateY(-50%); } #head_slider_content_list { margin:auto; overflow:hidden; height:100%; width:820px; } #head_slider_content { float:left; height:100%; width:7000px; } #head_slider_content> { float:left; position: relative; top: 50%; transform: translateY(-50%); } </style>
Partager