Discussion :

[lemirandais]

Bonjour,

Voila, je suis en train de faire un slider sur mon site.
Le passage de div en div automatiquement fonctionne, le seul problème est au niveau du chronomètre. Je souhaiterais que lorsque je clique sur le bouton suivant ou précédent, ben que le chrono se réinitialise, c'est à dire qu'il revienne à 0.
Voici le résultat: <lien>http://leknoppix.fr/index.html</lien>

et voici le javascript qui me permet de rendre dynamique ce slider:

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
$(document).ready(function(){
	//Configuration
		  var retour = true;
		  var tempsTransition = 2000;
		  var affichePlayPause = false;
		  var lectureAutomatique = true;
		  	var tempsAttente = 8000;
 
		  var icones = new Array();
		  		icones['play'] = 'http://leknoppix.fr/img/play_slider.png';
		  		icones['pause'] = 'http://leknoppix.fr/img/pause_slider.png';	
 
		  var currentPosition = 0;
		  var slideWidth = 560;
		  var slides = $('.slide');
		  var numberOfSlides = slides.length;
		  var interval;
		  var lectureEnCours = false;
  // Supprime la scrollbar en JS
  $('#slidesContainer').css('overflow', 'hidden');
 
  // Attribue  #slideInner  à toutes les div .slide
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });
 
  // Longueur de #slideInner égale au total de la longueur de tous les slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);
 
  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Précédent</span>')
    .append('<span class="control" id="rightControl">Suivant</span>');
 
 
 
  // Hide left arrow control on first load
  manageControls(currentPosition);
 
  //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);
  });
 
  // 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-1)
	{
		$('#rightControl').hide();
	}
	if(position == numberOfSlides && retour == true){
		currentPosition = 0;
		 $('#leftControl').hide();
	}
  }
  function suivant(){
	$('#rightControl').click();
	}
  function start() {
  	lectureEnCours = true;
    interval = setInterval(suivant, tempsAttente );
  }
  function pause() {
  	lectureEnCours = false;
   clearInterval(interval);
  }
 
 //Si le diapo est activé 
if(lectureAutomatique == true){
  start();
}
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();
		}
	});
}
 
 
 
});

Merci d'avance à tous ceux qui m'aideront.

[lemirandais]

Personne?

Avez vous besoin que j'explique d'une autre façon?

lemirandais

[bigben89]

Je pense pas qu'on puisse réinitialiser le timer à proprement parler, par contre, on peut toujours le supprimer puis le recréer :

Code :

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

1
2
3
4
5
$('.control').bind('click', function(){
    // ...
    clearInterval(interval);
    setInterval(suivant, tempsAttente );
})

[lemirandais]

Non sa ne marche pas. Bon je pense que je vais le laisser comme sa pour avoir une version potable. Merci pour votre aide.

[bigben89]

Oups !
Petite coquille de ma part, il faut penser à récupérer l'interval après le nouveau setInterval :

Code :

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

1
2
3
4
5
6
$('.control').bind('click', function(){
    // ...

    clearInterval(interval);
    interval = setInterval(suivant, tempsAttente );
})

Ca ne risquait pas de marcher correctement, sans ça.
A priori, maintenant, il n'y a plus de raison que ça ne marche pas.

[lemirandais]

Merci sa marche très très bien.