Switch par for dans une diaporama d'image

Version imprimable

Bonjour à tous s'il vous plait je voudrais créer une diaporama d'image en javascript avec suivant et précédent comme boutons

j'ai ce code qui passe sans problème

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
 case '2':
        {   
	     document.getElementById('1').style.display="none";
		  document.getElementById('2').style.display="block";
		  document.getElementById('3').style.display="none";
		  document.getElementById('4').style.display="none";
		  document.getElementById('5').style.display="none";
		  document.getElementById('6').style.display="none";
		  document.getElementById('7').style.display="none";
		  document.getElementById('8').style.display="none";
		  document.getElementById('9').style.display="none";
		  document.getElementById('10').style.display="none";
		  i='3';
	    }
	  break;

quand je remplace par celui il ne passe pas

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
case '2':
    {  
 
	     document.getElementById('2').style.display="block";
	    for (j=0;j<tab.length;j++)
		   {
			     if(tab[j]!=i)
		         {
	              document.getElementById(tab[j]).style.display="none";
		         }
				 if (j==9)
				  i=1;
				else if(tab[j]==i)
 
	              i=tab[j+1]
 
		   }
	  }
	break;

où

Code:

1
2
 
"1","2","3","4","5","6","7","8","9","10"

sont les id des images stockés dans

Code:

1
2
3
4
 
var tab = Array ("1","2","3","4","5","6","7","8","9","10");
var i='1';
var j;

Problème d'indice ;)

Quand tu fais tab[1], tu t'attends à trouver "1", mais en réalité tu trouves "2" car en JavaScript, les tableaux commencent à 0.

D'autre part, un switch/case est assez maladroit : tu es obligé de rajouter ou retirer un case à chaque fois que tu rajoutes ou que tu retires une image dans ton diaporama ! On peut avoir une approche plus atucieuse :
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 25 26 27 28 29 var nbImages = 10; function imgSuivante( i ) { document.getElementById('' + i).style.display = 'none'; var suivante = i + 1; if (suivante > nbImages) { suivante = 1; } document.getElementById('' + suivante).style.display = 'block'; } function imgPrecedente( i ) { document.getElementById('' + i).style.display = 'none'; var precedente = i - 1; if (precedente < 0) { precedente = nbImages; } document.getElementById('' + precedente).style.display = 'block'; } var imgActuelle = 1; // initialisation // quand on clique sur « suivant » // … actuelle = imgSuivante(actuelle); // quand on clique sur « précédent » // … actuelle = imgPrecedente(actuelle);
Enfin, note que selon les normes W3C du HTML et du XML, les id ne peuvent pas commencer par un chiffre. Certains navigateurs pourraient se comporter bizarrement si tu ne respectes pas cette norme, et provoquer des erreurs difficiles à deviner. Il vaut mieux rajouter un préfixe, par exemple <img id="img1" … />, et modifier les appels à getElementById pour que ça colle.

;)

Merci

actuelle sert à quoi car c'est

Code:

var imgActuelle = 1; // initialisation

qui a été initialisée

et je passe quoi à la fonction que je recupère comment?

mon code HTML

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
25
26
27
28
29
30
31
32
33
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Visionneuse d'images</title>
<script language="javascript" src="visioneuse.js"></script>
<link rel="stylesheet" href="visionneuse.css" media="screen" />
</head>
 
<body>
<h2 id="titre"> VISIONNEUSE D'IMAGES</h2>
<!--bouttons-->
 <div id="boutton">
   <input type="button" value="Preccédent" id="prec" onclick="imgSuivante()"/>
    <input type="button" value="Suivant" id="suiv" onclick="imgSuivante()"/>
        <input type="button" value="Lect / Auto" id="lect" onclick="boucle()"/>
 </div>
 <!--Images-->
 <div id="image">
   <img src="image/dune.jpg" title="Dune" alt="Dune" id="1" width="400" height="350" style="display:block; text-align:center"  />
   <img src="image/eloliene.jpg" title="Eolienne" alt="Eolienne" id="2" width="400" height="350" style="display:none" />
    <img src="image/fleur.jpg" title="Fleur" alt="Fleur" id="3" width="400" height="350" style="display:none; text-align:center"  />
   <img src="image/neige.jpg" title="Neige" alt="Neige" id="4" width="400" height="350" style="display:none" />
   <img src="image/neigee.jpg" title="Loup" alt="loup" id="5" width="400" height="350" style="display:none; text-align:center"  />
   <img src="image/palmiers.jpg" title="Cocotiers" alt="cocotier" id="6" width="400" height="350" style="display:none" />
    <img src="image/papillon.jpg" title="Papillon" alt="Papillon" id="7" width="400" height="350" style="display:none; text-align:center"  />
   <img src="image/pierres.jpg" title="pierre" alt="pierre" id="8" width="400" height="350" style="display:none" />
    <img src="image/vagues.jpg" title="vagues" alt="vagues" id="9" width="400" height="350" style="display:none; text-align:center"  />
   <img src="image/riviere.jpg" title="riviere" alt="riviere" id="10" width="400" height="350" style="display:none" />
 </div>
</body>
</html>