mon diaporama automatique

**finalfx** · 20/01/2007, 19h09

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 :

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

**Auteur** · 20/01/2007, 23h19

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 :

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
 
<!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 html : Sélectionner tout - Visualiser dans une fenêtre à part
```
<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 html : Sélectionner tout - Visualiser dans une fenêtre à part
```
<img id="diapo" name="diapo" src="Logos/web4U_3.jpg" width="384" height="296" alt="" />
```

**finalfx** · 21/01/2007, 13h13

Merci ça marche bien

mon diaporama automatique

JavaScript

Vue hybride

Discussions similaires

Partager

Partager