Partage
  • Partager sur Facebook
  • Partager sur Twitter

diapo 2 j'en ai marre

Sujet résolu
    26 mai 2010 à 17:06:20

    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>
    
    • Partager sur Facebook
    • Partager sur Twitter
      26 mai 2010 à 18:26:11

      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 ;)
      • Partager sur Facebook
      • Partager sur Twitter
        26 mai 2010 à 20:01:20

        merci beaucoup j'essaie dés demain
        • Partager sur Facebook
        • Partager sur Twitter

        diapo 2 j'en ai marre

        × 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.
        • Editeur
        • Markdown