Switch par for dans une diaporama d'image

patricx · 11/10/2011, 06h16

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 :

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
 
 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 :

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
 
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 :

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

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

sont les id des images stockés dans

Code :

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

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

Watilin · 11/10/2011, 09h27

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 JS :

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
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.

patricx · 11/10/2011, 11h04

Merci

actuelle sert à quoi car c'est

Code :

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

var imgActuelle = 1; // initialisation

qui a été initialisée

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

mon code HTML

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
 
<!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>

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email