Bonjour à tous à la suite du tuto de l'objet image je tente
de construire un diaporama mais je bloque.
J'ai crée un tableau mémorisant le nom des fichiers à charger
et je voudrais que chaque image change au bout de 3 secondes
mais je n'arrive pas écrire cette partie du moins ce que j'ai fait
ne semble pas fonctionner.
Une foic chaque image affichée (3 images à 3 secondes=9)
je relance la fonction avec un setInterval pour pouvoir boucler
<img id="monImage" alt="image " src="image1.jpg" width ="800" height="600"/>
<script type="text/javascript">
function changerImage(img, src, maxWidth, maxHeight)
{
var image = new Image();
image.onerror = function()
{
alert("Erreur lors du chargement de l'image");
}
image.onabort = function()
{
alert("Chargement interrompu");
}
// une fois l'image chargée :
image.onload = function()
{
// si l'image est désignée par son id
if(typeof img == "string")
img = document.getElementById(img);
// si l'image doit être redimensionnée
var reduction = 1;
if(maxWidth && maxHeight) // si ils sont true c'est à dire pas false, c'est à dire pas undefined, c'est à dire qu'ils ont été déterminés
if(image.width > maxWidth || image.height > maxHeight)
reduction = Math.max(image.width/maxWidth, image.height/maxHeight);
// on affiche l'image
img.src = image.src;
img.width = Math.round(image.width / reduction);
img.height = Math.round(image.height / reduction);
}
image.src = src;
}
//création de la fonction permettant de relancer le diapo en boucle via setInterval
//une fois que chacune des images du tableau a été affichée
function relance ()
{
//création d'un tableau contenant les images du diapo
var tabimg = new Array('image1.jpg','image2.jpg','image3.jpg');
for (var i= 0;i<3;i++)// on boucle sur toutes les images
{
var dt= new Date();
var tps1 = dt.getSeconds();
if (tps1 >=3000){
//on lance la fonction changeImage et on passe en para les images du tabl
changerImage("monImage", tabimg[i],800,600);
}
}
}
setInterval('relance();',9000);
</script>
Tout d'abord si tu veux utiliser correctement setInterval et setTimeout, il faut donner une fonction en tant que 1er paramètre et non pas une chaîne de caractères. Donc ligne 61 c'est mieux d'écrire: setInterval(relance,9000);
Citation : aerosky
et je voudrais que chaque image change au bout de 3 secondes
Bien mais où se trouve la (les) ligne(s) qui sont censés faire ce travail?
Je suppose que c'est ce que t'as voulu faire aux lignes 50 à 54
Analysons donc le comportement de ces lignes
On commence par arriver ligne 50 où on sauvegarde le 'temps' actuel
ligne 51 on regarde la valeur des secondes (donc s'il est 18h26min33s, on récupère 33s)
ligne 52: on vérifie que cette valeur est supérieur à 3000 (vu qu'il n'y a que 60 secondes dans une minute, cette condition est toujours fausse)
ligne 54 si la condition est vraie on change d'image
on recommence la boucle (3 fois en tout)
Donc premier problème tu ne regardes pas vraiment s'il s'agit de 3s écoulé
et deuxième problème tu n'attends pas le temps nécessaire pour afficher ces images.
Tu as maintenant plusieurs solutions possibles:
1/ (la solution qui permet de ne pas trop changer ton code, mais ce n'est pas la plus propre)
Tu utilises un setTimeout pour chaque image
par exemple:
for (var i= 0;i<3;i++)// on boucle sur toutes les images
{
setTimeout((function(){
return function(j){
changerImage("monImage", tabimg[j],800,600); //on lance la fonction changeImage et on passe en para les images du tabl
};
})(i),i*3000); //on execute la fonction dans i*3s (c'est à dire immédiatement pour la 1ere dans 3s pour la 2eme et dans 6 secondes pour la 3eme)
}
la closure est nécessaire pour avoir la bonne valeur de tabimg[i]
2/ (la solution la plus propre à mon sens)
tu ne fais plus de boucle ici
Le principe est de changer d'image 3s après que l'image précédente ait été chargée.
Pour cela tu peux soit utiliser un setTimeout que tu places dans la fonction changerImage qui se chargera d'appeler l'image suivante (attention à bien envoyer toutes les informations nécessaires)
Ou alors tu peux utiliser un setInterval qui répétera toutes les 3s l'opération demandant de changer d'image
Dans ces 2 cas tu n'as plus besoin du setInterval ligne 61 (contrairement à la 1ere solution)
Par exemple le 2e cas pourrait être réalisé de cette manière:
setInterval((function(){
var id=0; //sert à garder en mémoire l'id de l'image qui est actuellement utilisée
return function(){
id=(id+1)%tabimg.length; //sert à incrémenter la valeur de l'id (en le ramenant à 0 lorsqu'il arrive à la fin du tableau)
changerImage("monImage", tabimg[id],800,600); //on lance la fonction changeImage et on passe en para les images du tabl
}
})(),3000);
À placer dans la fonction 'relance' (ou au même endroit où tabimg est défini) mais attention à ne plus relancer cette fonction (sinon tu va créer plusieurs appels simultanés et cela pourrait faire n'importe quoi) du coup la fonction 'relance' serait peut-être à renommer
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.