Défilement continu d'images

**Jipis** · 21/01/2011, 11h17

Bonjour,

Je bloque sur un problème depuis quelques temps déjà, dans un premier temps j'avais mis des boutons suivant, précédent, que j'ai ensuite enlevé pour avoir un défilement constant.

Jusque là ça marche, sauf que j'aimerais que le défilement soit continue, là, il y a un blanc entre le moment où le defilement arrive au bout et celui où il reprend, et je ne vois pas comment régler ce problème.

Voici le lien vers la page de démo : http://www.jeanphilippebellon.com/vincent/phototheque/

Voici comment se présente la galerie :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<div id="slider"> 
   <div id="gallery_content"> 
      <a><img/></a> * 20 (par exemple)          
   </div> 
</div>

Et voici mon JS :

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
 
        var slide = { 
            nbCurrent : null, 
            elem : null, 
            nbSlide : null, 
            nbPicture : null, 
            largeurCache : null, 
            init : function(elem){ 
                this.elem=elem; 
                nbCurrent = 0; 
                nbPicture = 0; 
                $("#gallery_content > a").each(function(){ 
                   nbPicture += 1; 
                }); 
                nbSlide = Math.floor((nbPicture*80)/400)-1; 
                largeurCache = parseInt($('#slider').width()); 
                $('#gallery_content').css('width',nbPicture*80); 
 
            }, 
            gotoslide : function(num){ 
                var cssfin = {"margin-left" : -1600+"px" }; 
                $("#gallery_content").animate(cssfin,10000,'linear',function(){ 
                    $("#gallery_content").css({'margin-left':'420px'}); 
                }); 
 
            } 
        } 
        $(function(){ 
            if(screen.width < 1680){ 
                $("#gallery_content > a").each(function(){ 
                    var href = $(this).find('img').attr("alt"); 
                    $(this).attr('href',href); 
                    $(this).attr('rel','zoombox  '); 
                }); 
            } 
            slide.init($("#slider")); 
            slide.gotoslide(1); 
            setInterval('slide.gotoslide(1)',10100); 
        });

Le 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
 
        a, img { 
            border: none; 
        } 
        #conteneur { 
            width: 1024px; 
            margin: 0 auto; 
            text-align: center; 
        } 
        #slider { 
            width: 419px; 
            height: 75px; 
            overflow: hidden; 
            padding : 5px 3px 5px 3px; 
            position: relative; 
            border: 1px solid #000; 
        } 
 
        #slider a { 
            margin: 0 5px 0 0; 
        } 
        #gallery_content a { 
            display: block; 
            float: left;   
        }

Je me disais qu'en créant deux div et en replaçant la première à la fin dès qu'elle est masquée cela pourrait le faire, mais je vois pas comment faire.

Merci d'avance pour votre aide.

**ABCIWEB** · 21/01/2011, 14h47

Sur le principe tu peux t'inspirer de cette fonction qui réalise des boucles continues ou tu peux aussi l'utiliser tel quel:

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
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
// Objets défilants A. Bontemps, abciweb.net Version 2.1
function DF_ObjetDefilant(id,id_dim,mode,sens,vit,pos,b_esp,pause)
{
   this.DF_ObjetParam = typeof this.DF_ObjetParam == 'undefined' ? new Array() : this.DF_ObjetParam;   
   this.DF_ObjetParam[id] = typeof this.DF_ObjetParam[id] == 'undefined' ? new Array() : this.DF_ObjetParam[id];   
 
   if(typeof this.DF_ObjetParam[id]['id_defile'] == 'undefined') {Set_param (id,id_dim,mode,sens,vit,pos,b_esp,pause);}
   else
   if (this.DF_ObjetParam[id]['dim_defilant'] > 0)
   {
      if (this.DF_ObjetParam[id]['mode'] == 'r') {Boucle_ar(id);} else {Boucle_cont(id);}
 
      this.DF_ObjetParam[id]['Timer'] = setTimeout(function(){DF_ObjetDefilant(id)},this.DF_ObjetParam[id]['delaicrnt']);   
   }
 
 
 
   function Set_param (id,id_dim,mode,sens,vit,pos,b_esp,pause)
   {   
      var id_d = null;
      var id_c = null;
      var id_cc = null;
 
 
      if(!(id_d = document.getElementById(id))) {id_d = null;} else if(!(id_c = id_d.parentNode)) {id_c = null;}
      else if(!(id_cc = id_c.parentNode)) {id_cc = null;};
 
      if(id_c != null && id_cc != null && id_d != null)
      {
      function is_all_ws ( nod )
         {
           // Use ECMA-262 Edition 3 String and RegExp features
           return !(/[^\t\n\r ]/.test(nod.data));
         }
 
 
      function is_ignorable ( nod )
         {
           return (nod.nodeType == 8) || // A comment node
                ( (nod.nodeType == 3) && is_all_ws(nod) ); // a text node, all ws
         }
 
 
      function trim_debut (myString)
         {
            return myString.replace(/^\s+/g,'')
         }
 
 
      function trim_fin (myString)
         {
            return myString.replace(/\s+$/g,'')
         }
 
 
      // Nettoyage mise en page html Mozilla Chrome...
      if (id_d != null)
         {
            while (id_d.hasChildNodes() && is_ignorable(id_d.lastChild)) {id_d.removeChild(id_d.lastChild);}
            while (id_d.hasChildNodes() && is_ignorable(id_d.firstChild)) {id_d.removeChild(id_d.firstChild);}
         }   
      }
 
      if(id_c != null && id_cc != null && id_d != null && id_d.hasChildNodes())
         {
            this.DF_ObjetParam[id]['instance'] = typeof this.DF_ObjetParam[id]['instance'] == 'undefined' ? function () {DF_ObjetDefilant(id,id_dim,mode,sens,vit,pos,b_esp,pause);} : this.DF_ObjetParam[id]['instance'];
 
            this.DF_ObjetParam[id]['sens_ini'] = typeof sens != 'undefined' && (sens == 'g' || sens == 'd' || sens == 'h' || sens == 'b') ? sens : 'g';
 
            this.DF_ObjetParam[id]['sens_horizontal'] = this.DF_ObjetParam[id]['sens_ini'] == 'g' || this.DF_ObjetParam[id]['sens_ini'] == 'd' ? true : false;   
 
            id_cc.style.overflow = "hidden";
 
            id_c.style.visibility = "hidden";
            id_c.style.position = "relative";
            id_c.style.overflow = "hidden";
 
 
            id_d.style.position = "absolute";
            id_d.style.width = "auto";
            id_d.style.height = "auto";
 
 
            // Nettoyage espaces vides en début de défilant pour le mode horizontal
            var elem = id_d.firstChild;   
 
            if (elem.nodeType == 3 && this.DF_ObjetParam[id]['sens_horizontal'])
               {
                  var noeud_debut = document.createTextNode(trim_debut(elem.nodeValue));
                  id_d.replaceChild(noeud_debut, id_d.firstChild);
               }
 
            // Nettoyage espaces vides en fin de défilant
            elem = id_d.lastChild;   
 
            if (elem.nodeType == 3)
               {
                  var noeud_fin = document.createTextNode(trim_fin(elem.nodeValue));
                  id_d.replaceChild(noeud_fin, id_d.lastChild);
               }
 
 
            var div_defile = id_d.cloneNode(true);
 
            var espace_insecable = document.createTextNode("\u00a0");
 
            // Ajoute un espace insécable "\u00a0" si 'BR' est en fin de défilant pour le mode vertical (pour ie)
            if(!this.DF_ObjetParam[id]['sens_horizontal'] && div_defile.lastChild.nodeName == 'BR')
            {
               div_defile.appendChild(espace_insecable);
            }
 
            var c = document.createElement("div");
            c.style.height = "100%";
 
            var nb_noeud = id_c.childNodes.length;
 
 
            // Dimensions du cadre
            for (var i = 0; i < nb_noeud ; i++) {id_c.removeChild(id_c.firstChild);}
            id_c.appendChild(c);
 
            this.DF_ObjetParam[id]['hauteur_cadre'] = c.offsetHeight;
            this.DF_ObjetParam[id]['largeur_cadre'] = c.offsetWidth;
            id_c.removeChild(id_c.firstChild);
            id_c.appendChild(div_defile);         
 
            this.DF_ObjetParam[id]['id_defile'] = document.getElementById(id);
 
 
            // Dimensions du défilant   
            var id_dim = typeof id_dim == 'undefined' || trim_debut(id_dim) == '' || id_dim == 'auto' ? 'auto' :  parseInt(id_dim);
 
            if(this.DF_ObjetParam[id]['sens_horizontal'])
               {
                  this.DF_ObjetParam[id]['id_defile'].style.height = this.DF_ObjetParam[id]['hauteur_cadre']+'px';
 
                  this.DF_ObjetParam[id]['largeur_def'] = id_dim == 'auto' ? undefined : id_dim;
 
                  if (typeof this.DF_ObjetParam[id]['largeur_def'] == 'undefined')
                  {
                     id_c.style.width = '1000000px';//largeur maxi de calcul
 
                     this.DF_ObjetParam[id]['largeur_def'] = this.DF_ObjetParam[id]['id_defile'].offsetWidth;
 
                     id_c.style.width = 'auto';
                  }
 
                  this.DF_ObjetParam[id]['id_defile'].style.width = this.DF_ObjetParam[id]['largeur_def']+'px';
 
               }
               else
               {
                  this.DF_ObjetParam[id]['id_defile'].style.width = this.DF_ObjetParam[id]['largeur_cadre']+'px';
 
                  this.DF_ObjetParam[id]['hauteur_def'] = id_dim == 'auto' ? this.DF_ObjetParam[id]['id_defile'].offsetHeight : id_dim;
 
                  this.DF_ObjetParam[id]['id_defile'].style.height = this.DF_ObjetParam[id]['hauteur_def']+'px';
               }
 
            this.DF_ObjetParam[id]['dim_cadre'] = this.DF_ObjetParam[id]['sens_horizontal'] ? this.DF_ObjetParam[id]['largeur_cadre'] : this.DF_ObjetParam[id]['hauteur_cadre'];
 
            this.DF_ObjetParam[id]['dim_defilant'] = this.DF_ObjetParam[id]['sens_horizontal'] ? this.DF_ObjetParam[id]['largeur_def'] : this.DF_ObjetParam[id]['hauteur_def'];
 
 
            this.DF_ObjetParam[id]['mode'] = typeof mode != 'undefined' && (mode == 'r' || mode == 'b') ? mode : 'b';
 
            this.DF_ObjetParam[id]['vitesse'] = typeof vit != 'undefined' && parseInt(vit) > 0 ? parseInt(vit) : 20;
 
            this.DF_ObjetParam[id]['psinit'] = typeof pos != 'undefined' && parseFloat(pos) > 0 ? parseFloat(pos) : 0;
 
            this.DF_ObjetParam[id]['b_esp'] = typeof b_esp != 'undefined' && parseFloat(b_esp) > 0 ? parseFloat(b_esp) : 0;      
 
            this.DF_ObjetParam[id]['pause'] = typeof pause != 'undefined' && parseInt(pause) > 0 ? parseInt(pause) : 0;
 
 
            this.DF_ObjetParam[id]['b_esp'] = this.DF_ObjetParam[id]['b_esp'] < 0  || this.DF_ObjetParam[id]['b_esp'] > 100 || this.DF_ObjetParam[id]['mode'] == 'r' ? 0 : Math.ceil(this.DF_ObjetParam[id]['b_esp'] * this.DF_ObjetParam[id]['dim_cadre']/100);
 
 
            this.DF_ObjetParam[id]['psinit'] = this.DF_ObjetParam[id]['psinit'] == 100 || this.DF_ObjetParam[id]['psinit'] < 0 || this.DF_ObjetParam[id]['psinit'] > 100 ? this.DF_ObjetParam[id]['dim_cadre'] : Math.ceil(this.DF_ObjetParam[id]['psinit']*this.DF_ObjetParam[id]['dim_cadre']/100);      
 
 
            this.DF_ObjetParam[id]['psinit'] = (this.DF_ObjetParam[id]['dim_cadre'] > this.DF_ObjetParam[id]['dim_defilant'] &&  this.DF_ObjetParam[id]['psinit'] == 0 ) ? this.DF_ObjetParam[id]['dim_cadre'] - this.DF_ObjetParam[id]['dim_defilant'] : this.DF_ObjetParam[id]['psinit'];
 
 
            this.DF_ObjetParam[id]['pscrnt'] = this.DF_ObjetParam[id]['psinit'];
 
            this.DF_ObjetParam[id]['sens'] = 1;
 
            this.DF_ObjetParam[id]['p_retour'] = this.DF_ObjetParam[id]['dim_defilant'] >= this.DF_ObjetParam[id]['dim_cadre'] ? this.DF_ObjetParam[id]['dim_defilant'] - this.DF_ObjetParam[id]['dim_cadre'] : 0;
 
            this.DF_ObjetParam[id]['dim_defilant'] += this.DF_ObjetParam[id]['b_esp'];                                          
 
            this.DF_ObjetParam[id]['p_retour'] = this.DF_ObjetParam[id]['mode'] == 'b' ? this.DF_ObjetParam[id]['dim_defilant'] : this.DF_ObjetParam[id]['p_retour'];
 
 
            if (this.DF_ObjetParam[id]['mode'] == 'r' && this.DF_ObjetParam[id]['dim_defilant'] == this.DF_ObjetParam[id]['dim_cadre'] && this.DF_ObjetParam[id]['psinit'] == 0) {this.DF_ObjetParam[id]['dim_defilant'] = 0;}
 
            if (this.DF_ObjetParam[id]['dim_defilant'] > 0 && this.DF_ObjetParam[id]['mode'] == 'b') {Ajout_clone(id);}
 
 
            id_cc.style.overflow = "visible";
            id_c.style.visibility = "visible";   
 
 
            this.DF_ObjetParam[id]['instance']();   
      }
   }
 
   function Ajout_clone(id)
   {         
      var div_contenu = document.createElement("div");
 
      var nb_noeud = this.DF_ObjetParam[id]['id_defile'].childNodes.length;
 
      for (var i = 0; i < nb_noeud ; i++)
         {               
            div_contenu.appendChild(this.DF_ObjetParam[id]['id_defile'].firstChild.cloneNode(true));
            this.DF_ObjetParam[id]['id_defile'].removeChild(this.DF_ObjetParam[id]['id_defile'].firstChild);
         }
 
      if (this.DF_ObjetParam[id]['b_esp'] > 0)
      {
         if (this.DF_ObjetParam[id]['sens_horizontal'])
            {
               this.DF_ObjetParam[id]['sens_ini'] == 'g' ? div_contenu.style.marginRight = this.DF_ObjetParam[id]['b_esp']+'px' : div_contenu.style.marginLeft = this.DF_ObjetParam[id]['b_esp']+'px';      
            }
            else
            {
               this.DF_ObjetParam[id]['sens_ini'] == 'h' ? div_contenu.style.marginBottom = this.DF_ObjetParam[id]['b_esp']+'px' : div_contenu.style.marginTop = this.DF_ObjetParam[id]['b_esp']+'px';               
            }
      }
 
      if (this.DF_ObjetParam[id]['sens_horizontal']) {div_contenu.style.display = "inline";};               
 
      this.DF_ObjetParam[id]['id_defile'].appendChild(div_contenu.cloneNode(true));
 
      var nb_clone = Math.ceil(this.DF_ObjetParam[id]['dim_cadre']/(this.DF_ObjetParam[id]['dim_defilant']));
 
      if (this.DF_ObjetParam[id]['sens_horizontal'])
         {
            this.DF_ObjetParam[id]['id_defile'].style.width = ((nb_clone+1) * this.DF_ObjetParam[id]['dim_defilant'])+'px';
         }
         else
         {
            this.DF_ObjetParam[id]['id_defile'].style.height = ((nb_clone+1) * this.DF_ObjetParam[id]['dim_defilant'])+'px';
         }
 
      for (var j = 0; j < nb_clone ; j++)
         {
            this.DF_ObjetParam[id]['id_defile'].appendChild(this.DF_ObjetParam[id]['id_defile'].firstChild.cloneNode(true));   
         }
   }
 
   function Boucle_cont(id)
   {
      this.DF_ObjetParam[id]['delaicrnt'] = this.DF_ObjetParam[id]['vitesse'];
      this.DF_ObjetParam[id]['inverse'] = 1;
 
      if(this.DF_ObjetParam[id]['pscrnt'] == - this.DF_ObjetParam[id]['p_retour'])   
            {               
               this.DF_ObjetParam[id]['id_defile'].appendChild(this.DF_ObjetParam[id]['id_defile'].firstChild.cloneNode(true)); 
               this.DF_ObjetParam[id]['id_defile'].removeChild(this.DF_ObjetParam[id]['id_defile'].firstChild);
 
               this.DF_ObjetParam[id]['inverse'] = -1;      
               this.DF_ObjetParam[id]['pscrnt'] = 0;
               this.DF_ObjetParam[id]['sens'] = -1;      
            }      
            else
            {
               if(this.DF_ObjetParam[id]['pscrnt'] == this.DF_ObjetParam[id]['psinit'])
                  {
                     this.DF_ObjetParam[id]['sens'] *= -1;
                     this.DF_ObjetParam[id]['delaicrnt'] = this.DF_ObjetParam[id]['pause'];
                  }
            }
 
         if (this.DF_ObjetParam[id]['sens_horizontal'])
            {
               this.DF_ObjetParam[id]['sens_ini'] == 'g' ? this.DF_ObjetParam[id]['id_defile'].style.left = this.DF_ObjetParam[id]['pscrnt']+"px" : this.DF_ObjetParam[id]['id_defile'].style.right = this.DF_ObjetParam[id]['pscrnt']+"px" ;
            }
            else
            {
               this.DF_ObjetParam[id]['sens_ini'] == 'h' ? this.DF_ObjetParam[id]['id_defile'].style.top = this.DF_ObjetParam[id]['pscrnt']+"px" : this.DF_ObjetParam[id]['id_defile'].style.bottom = this.DF_ObjetParam[id]['pscrnt']+"px" ;
            }
 
         this.DF_ObjetParam[id]['pscrnt'] += this.DF_ObjetParam[id]['sens'];
   }
 
   function Boucle_ar (id)
   {
      this.DF_ObjetParam[id]['delaicrnt'] = this.DF_ObjetParam[id]['vitesse'];
      this.DF_ObjetParam[id]['inverse'] = 1;
 
      if(this.DF_ObjetParam[id]['pscrnt']  == - this.DF_ObjetParam[id]['p_retour'] || this.DF_ObjetParam[id]['pscrnt'] == this.DF_ObjetParam[id]['psinit'])
         {
            this.DF_ObjetParam[id]['inverse'] = -1;
            this.DF_ObjetParam[id]['delaicrnt'] = this.DF_ObjetParam[id]['pause'];
            this.DF_ObjetParam[id]['sens'] *= -1;
         }
 
      if (this.DF_ObjetParam[id]['sens_horizontal'])
         {      
            this.DF_ObjetParam[id]['sens_ini'] == 'g' ? this.DF_ObjetParam[id]['id_defile'].style.left = this.DF_ObjetParam[id]['pscrnt']+"px" : this.DF_ObjetParam[id]['id_defile'].style.right = this.DF_ObjetParam[id]['pscrnt']+"px" ;
         }
         else
         {
            this.DF_ObjetParam[id]['sens_ini'] == 'h' ? this.DF_ObjetParam[id]['id_defile'].style.top = this.DF_ObjetParam[id]['pscrnt']+"px" : this.DF_ObjetParam[id]['id_defile'].style.bottom = this.DF_ObjetParam[id]['pscrnt']+"px" ;
 
         }
 
      this.DF_ObjetParam[id]['pscrnt'] += this.DF_ObjetParam[id]['sens'];
   }
 
}
 
function DF_ObjetNavigMous(id,etat,nb)
{
   var nb = typeof nb == 'undefined'? 0 :  nb + 1;
 
   if(typeof this.DF_ObjetParam != 'undefined' && typeof this.DF_ObjetParam[id] != 'undefined' && this.DF_ObjetParam[id]['id_defile'] != null && typeof this.DF_ObjetParam[id]['instance'] != 'undefined' && typeof this.DF_ObjetParam[id]['Timer'] == 'number')
      {
         clearTimeout(this.DF_ObjetParam[id]['Timer']);
         this.DF_ObjetParam[id]['Timer'] = 0;
         if (etat == 'out') this.DF_ObjetParam[id]['instance']();
      }
      else if (nb < 30)//pour ancien navigateur avec chargement onload de DF_ObjetDefilant_Off(id)
      {
         setTimeout(function(){DF_ObjetNavigMous(id,etat,nb)},15);
      }
}
 
function DF_ObjetSensInverse (id)
{
   if(typeof this.DF_ObjetParam != 'undefined' && typeof this.DF_ObjetParam[id] != 'undefined' && this.DF_ObjetParam[id]['id_defile'] != null && typeof this.DF_ObjetParam[id]['Timer'] == 'number' && this.DF_ObjetParam[id]['inverse'] == 1 && !(this.DF_ObjetParam[id]['pscrnt']  == - this.DF_ObjetParam[id]['p_retour'] || this.DF_ObjetParam[id]['pscrnt'] == this.DF_ObjetParam[id]['psinit']))
      {
         this.DF_ObjetParam[id]['sens'] *= -1;
      }
}
 
function DF_ObjetDefilant_On (id)
{
   if(typeof this.DF_ObjetParam[id]['id_defile'] == 'undefined' && typeof this.DF_ObjetParam[id]['instance'] != 'undefined')
      {
         this.DF_ObjetParam[id]['instance']();   
      }
      else
      {
         DF_ObjetNavigMous(id,'out');
      }
}
 
function DF_ObjetDefilant_Off (id)
{
   DF_ObjetNavigMous(id,'over');
}
 
function DF_ObjetDefilant_On_Off (id)
{
   if(typeof this.DF_ObjetParam[id]['id_defile'] == 'undefined' || (typeof this.DF_ObjetParam[id]['Timer'] == 'number' && this.DF_ObjetParam[id]['Timer'] == 0))
      {
         DF_ObjetDefilant_On (id);
      }
      else
      {
         DF_ObjetNavigMous(id,'over');
      }
}
 
function DF_ObjetDefilant_On_Inverse (id)
{
   if(typeof this.DF_ObjetParam[id]['id_defile'] == 'undefined' || (typeof this.DF_ObjetParam[id]['Timer'] == 'number' && this.DF_ObjetParam[id]['Timer'] == 0))
      {
         DF_ObjetDefilant_On (id);
      }
      else
      {
         DF_ObjetSensInverse (id);
      }
}
 
function DF_ObjetDefilant_Inverse (id)
{
   if(typeof this.DF_ObjetParam[id]['Timer'] == 'number' && this.DF_ObjetParam[id]['Timer'] > 0)
      {
         DF_ObjetSensInverse (id);
      }
}
 
function addLoad_DF_ObjetDefilant(func)
{
   if (window.addEventListener)
      {
         window.addEventListener("load", func, false);
      }
   else if (document.addEventListener)
      {
         document.addEventListener("load", func, false);
      }
   else if (window.attachEvent)
      {
         window.attachEvent("onload", func);
      }
}

Il y a également cette interface graphique qui permet de faire rapidement des tests et de récupérer le code html généré.

**Jipis** · 21/01/2011, 15h15

Merci, mais finalement j'ai trouvé un plugin qui fait ça.

http://www.catchmyfame.com/jquery/in...2/demo/d9.html

Mais je garde ton code qui est bien instructif.

**ABCIWEB** · 21/01/2011, 16h50

Envoyé par Jipis

Merci, mais finalement j'ai trouvé un plugin qui fait ça.

http://www.catchmyfame.com/jquery/in...2/demo/d9.html

Mais je garde tes liens qui sont bien instructifs.

Excellent lien que je garde également, merci du retour

La seule restriction de ce module (par rapport au lien que je t'ai donné plus haut) est qu'il est nécessaire que les images aient des largeurs de même dimensions, ce qui exclu le mélange d'images avec cadrage vertical et horizontal.

Par ailleurs l'éventuel texte doit se superposer aux images et ne peut être écrit à côté.

Mais en contre partie il offre d'autres fonctionnalités comme donc la superposition du texte sur les images et le défilement image par image etc.

En fait les deux solutions sont donc parfaitement complémentaires

Défilement continu d'images

jQuery

Discussions similaires

Partager

Partager