Defilement automatique pour un diaporama

Version imprimable

Bonjour,
Je réalise actuellement un diaporama d'image en php/javascript et fonctionne très bien.
Je voudrais lui rajouter un bouton pour faire défiler les images automatiquement, mais je bloque un peu.
Je me sers du php pour me générer un tableau qui contient toutes les photos d'un répertoire et un formulaire où j'affiche mes photos avec 5 boutons (Début, précédente,Démarrer,Suivante,Fin); mis à part démarrer, tous mes boutons fonctionnent parfaitement.
Quand j'ai voulu faire la fonction pour gérer le défilement automatique, j'ai quelques soucis:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function automatik(bouton) { forward(); bouton.value="Stop"; window.setTimeout("Automatik()",1000); if((bouton.value=="Stop") && (boucle==true)) { bouton.value="Commencer"; boucle=false; //alert('coucou'); } }
Ma fonction forward sert à afficher l'image suivante, j'affiche "Stop" sur mon bouton et je rappelle ma fonction au bout d'un certain temps (ici 1s pr éviter d'attendre trop longtemps).
Quand je clique une fois, les images s'affichent bien les unes après les autres, et quand je reclique, j'arrive bien dans ma condition (un "alert" m'a permis de le vérifier): mais au moment où j'arrive sur mon 'alert', j'aimerais que le diaporama s'arrête, donc à arrêter cette fonction.

bonjour,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
function automatik(bouton)
{
  forward();
  bouton.value="Stop";
 
if((bouton.value=="Stop") && (boucle==true))
  {
     bouton.value="Commencer";
     boucle=false;
     //alert('coucou');
   } else {
      window.setTimeout("Automatik()",1000);   //<<<<<<<<<<<<<<<<
   }
}

Quand je mets ce code, il execute qu'une seule fois le "window.setTimeout" ce qui correspond à afficher la photo suivante et s'arrête.
Peut-être que çà provient de mon formulaire:
Code:

1 2 3 4 <form name="formname"> <img src="<?echo $tablo_foto[0];?>" name="photoslider" WIDTH=<?echo $image_h;?> HEIGHT=<?echo $image_v;?>> <input type="button" name="slidebutton" onClick="automatik(this);" value="Commencer" title="Lecture automatique" style="width:75;border:1 SOLID #e6e6e6;" visible=false> </form>
En fait, j'avais mis une variable "boucle" pour savoir quand il etait en lecture automatique, qui est a "false" par défaut, mais je ne sais pas quand la mettre ou s'il faut que je la mette à "true".

10/12/2005, 15h41
dasdeb

Dans l'exemple donné par sympho, le setTimeout appelle la fonction Automatik() alors que son nom est automatik().
La différence a minuscule/A majuscule fait qu'elle n'est pas appelée, donc le setTimeout ne se fait pas.
10/12/2005, 18h08
Paniez

Effectivement, je n'avais pas vu cette erreur, mais il ne faut pas en vouloir à Sympho car c'était ce que j'avais dans mon code.
Mais même en mettant un a minuscule (donc un rappel de fonction), çà me fait un seul appel. En gros ce que j'aimerais, c'est lorsqu'on clic, çà me lance le diaporama et si on reclic çà l'arrete et là, je suis bloqué.

En fait ça ne peut pas marcher comme ça.
Essaye :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function automatik(bouton)
{
  if(bouton.value=="Commencer")
  {
    bouton.value="Stop";
    automatik_timer = setTimeout("forward()",1000);
  }
  else
  {
     clearTimeout(automatik_timer);
     bouton.value="Commencer";
   }
}

11/12/2005, 09h12
Paniez
Avec ce code, il m'affiche juste la photo d'après; le problème est, qu'une fois lancé, le bouton vaut "Stop" et çà passe dans le else. J'ai essayé avec un while:
Code:

1 2 3 4 5 6 7 if(bouton.value=="Commencer") bouton.value="Stop"; else bouton.value="Commencer"; while(bouton.value=="Stop") window.setTimeout("forward()",1000);
mais çà fait planté firefox.
Je me demande si ma fonction ne doit pas être du style:
function automatik(bouton, boucle) où je passe un booleen en parametre pour lui préciser si je suis dans le cas de l'appel recursif ou pas ?

une des solutions possibles:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<script type="text/javascript">
 
var t;
 
function auto(bouton){
 
if(bouton.value=="Commencer"){
	t=setInterval("forward()",1000);
	bouton.value="Stop"
}
else{
	clearTimeout(t);
	bouton.value="Commencer"
}
 
 
}
 
</script>
 
<p>
<input type="button" value="Commencer" onclick="auto(this)" />
</p>

11/12/2005, 10h26
Paniez

Merci Javatwister, çà marche nickel ;-)