Slideshow en jquery

**Imp rusg** · 18/07/2009, 19h03

Bonjour à tous,
Je suis toujours le même développeur du dimanche qui c'est mis depuis peu au Javascript.
J'ai un problème avec un slideshow que j'ai "codé" (avec des sources diverses du web), une slide sur deux passe trop vite et ne respecte donc pas le tempsAttente (= 6000) que vous pouvez voir dans le code ci-dessous:

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
$(document).ready(function(){
var retour = true;
		  var tempsTransition = 1000;
		  var affichePlayPause = true;
		  var lectureAutomatique = true;
		  	var tempsAttente = 6000;
 
		  var icones = new Array();
		  		icones['play'] = 'http://ns10.freeheberg.com/~fluxrss//website/theme/img/play_slider.png';
		  		icones['pause'] = 'http://ns10.freeheberg.com/~fluxrss//website/theme/img/pause_slider.png';	
 
 
		  var interval;
		  var lectureEnCours = true;
 
  var currentPosition = 0;
  var slideWidth = 620;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
 
  // Supprime la scrollbar en JS
  $('#slidesContainer').css('overflow', 'hidden');
 
  slides
  .wrapAll('<div id="slideInner"></div>')
  // on met tous les slides en float:left pour qu'il s'affichent de manière horizontale
  .css({
    'float' : 'left',
    'width' : slideWidth
  });
 
  // La longueur de #slideInner équivaut à la somme de la longueur de tous les slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);
 
  // Insert les flèches de gauche et de droite
  $('#fdroite')
    .append('<span class="control" id="rightControl"><img src="http://ns10.freeheberg.com/~fluxrss//website/theme/img/fl-1-slide.png" alt="fleche Xbox 360"></span>');
  $('#fdgauche')
    .prepend('<span class="control" id="leftControl"><img src="http://ns10.freeheberg.com/~fluxrss//website/theme/img/fl-2-slide.png" alt="fleche Xbox 360"></span>');
 
  // Cache la flèche de gauche au début
  manageControls(currentPosition);
 
  // crée un écouteur pour l'évènement de type clic sur les div qui ont la classe .control
  $('.control')
    .bind('click', function(){
    // Determine une nouvelle position
      currentPosition = ($(this).attr('id')=='rightControl')
    ? currentPosition+1 : currentPosition-1;
 
      //Cache ou montre les flèches
      manageControls(currentPosition);
      // Move slideInner using margin-left
      $('#slideInner').animate({
        'marginLeft' : slideWidth*(-currentPosition)
      });
    });
 
  // manageControls: Cache ou montre les flèches de contrôles en fonction de la position
  function manageControls(position){
    // Hide left arrow if position is first slide
    if(position==0){ $('#leftControl').hide() }
    else{ $('#leftControl').show() }
    // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() }
    else{ $('#rightControl').show() }
    }
 
 
 
	function start() {
  	lectureEnCours = true;
        interval = setInterval(suivant, tempsAttente );
	}
 
	function suivant(){
		$('#rightControl').click();
	}
 
	function pause() {
		lectureEnCours = false;
			clearInterval(interval);
	}
 
	 //Si le diapo est activé 
	if(lectureAutomatique == true){
	  start();
	}
 
	//bouton lecture paus
	if(affichePlayPause == true){
		$('#slidesContainer').prepend('<img id="navDiapo" src="" alt="Navigation diaporama" />');
		if(lectureAutomatique == true){
			$('#navDiapo').attr('src',icones['pause']);
		}else{
			$('#navDiapo').attr('src',icones['play']);	
		}
		$('#navDiapo').bind('click', function(){
			if(lectureEnCours == true){
				$(this).attr('src',icones['play']);
				pause();
			}else{
				$(this).attr('src',icones['pause']);
				start();
			}
		});
	}
 
 // manageControls: Cache ou montre les flêches de controle en fonction de la position courante
  function manageControls(position){
    // Cache la fleche "précédent" si on est sur le premier slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Cache la fleche "suivant" si on est sur le dernier slide (et que le retour automatique n'est pas activé)
    if(position==numberOfSlides-1 && retour == false){
		$('#rightControl').hide();
	} else {
		$('#rightControl').show();
	}
	if(position == numberOfSlides && retour == true){
		currentPosition = 0;
		 $('#leftControl').hide();
	}
  }
 
  //Crée un écouteur d'évènement de type clic sur les classes .control
  $('.control')
    .bind('click', function(){
 
    // Determine la nouvelle position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
 
	if(currentPosition == numberOfSlides && retour == false ){
		currentPosition--;
		pause();
	}
 
	// Cache ou montre les controles
    manageControls(currentPosition);
    // Fais bouger le slide
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    },tempsTransition);
  });

Si vous savez m'aider, en attendant je vais refaire "le cadre html" de mon slideshow car c'est peut être mon table qui cause problème.

Merci à ceux qui pourrait m'aider (ainsi que de commenter vos codes si vous en poster) ou ceux qui proposerait une autre solution pour faire un slideshow.

PS : vous pouvez le voir ici ( ns10.freeheberg.com/~fluxrss//website/ ) en action, désolé pour le décor ce n'est pas mon thème ne vous inquiéter pas.