mon diaporama automatique

Version imprimable

Bonjour,

J'essaie de créer un diaporama automatique avec un intervalle de 3s entre chaque affichage d'image, j'ai fait une tentative de script mais il ne marche pas :( je sais qu'il y a plein de scripts de ce genre sur le net mais j'essaye surtout de comprendre le mécanisme ...
Voici le code de ma page :

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
34
35
36
37
38
39
40
<!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=iso-8859-1" />
<title>Document sans nom</title>
<script language="javascript" type="text/javascript">
/* Prévoir dans une page HTML un diaporama, ces images se trouvant dans un dossier approprié… L'image doit changer toutes les 3 secondes.
more */
 
var image1= new Image();
image1.src="Logos/web4U_3.jpg";
var image2= new Image();
image1.src="Logos/web4U_4.jpg";
var image3= new Image();
image1.src="Logos/web4U_5.jpg";
var image4= new Image();
image1.src="Logos/web4U_6.jpg";
 
 
var tab= new Array("web4U_3.jpg","web4U_4.jpg","web4U_5.jpg","web4U_6.jpg");
var i=0;
function affiche()
{
 
 
           document.img[0].src="Logos/"+tab[i];
		   i++;
		   if (i>=3) i=0;    
 
}
 setInterval("affiche()",3000);
 
</script>
</head>
 
<body>
 
<p><img id="diapo" name="diapo" src="Logos/web4U_3.jpg" width="384" height="296" alt=""></p>
</body>
</html>

Merci d'avance

bonjour,

plusieurs choses :

visiblement tes variables image1, image2...ne sont pas utilisées
document.img[0] n'est pas une bonne notation utilise document.getElementById()
setInterval est appelé avant le chargement complet de la page. Donc si img n'est pas présent lors du premier appel, la fonction plante

code corrigé :
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 34 35 36 37 38 39 40 41 <!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=iso-8859-1" /> <title>Document sans nom</title> <script language="javascript" type="text/javascript"> /* Prévoir dans une page HTML un diaporama, ces images se trouvant dans un dossier approprié… L'image doit changer toutes les 3 secondes. more */ var tab= new Array("web4U_3.jpg","web4U_4.jpg","web4U_5.jpg","web4U_6.jpg"); var i=0; var chrono = null; function affiche() { document.getElementById("diapo").src="Logos/"+tab[i]; i++; if (i>=3) i=0; } function start() { chrono = setInterval(function(){affiche()},3000); } function stop() { clearInterval(chrono); } </script> </head> <body onload="start()" onunload="stop()"> <p><img id="diapo" name="diapo" src="Logos/web4U_3.jpg" width="384" height="296" alt=""></p> </body> </html>
J'ai créé la variable chrono
La fonction start() est appelé après le chargement complet de la page.
Pour arrêter proprement la temporisation j'ai créé la fonction stop() qui est appelé lorsque la page est fermée.
J'ai supprimé tes variables image1, image2... Fais comme tu avais commencé afaire à savoir placer le nom des images dans un tableau (tab).

Code:

<img id="diapo" name="diapo" src="Logos/web4U_3.jpg" width="384" height="296" alt="">

je crois que si tu veux que ton code soit valide XHTML il faut ajouter /

Code:

<img id="diapo" name="diapo" src="Logos/web4U_3.jpg" width="384" height="296" alt="" />

21/01/2007, 12h13
finalfx

Merci ça marche bien :)