Partage
  • Partager sur Facebook
  • Partager sur Twitter

Défilement d' images

    28 novembre 2011 à 8:32:16

    J' essaie de faire un défilement d' images(par cliques) mais je veux que celles-ci se répètent par la suite et c'est la que j'ai un problème voici mon code actuel

    var imgs= new Array();
    
    imgs[0]="images/sunrise.jpg";
    imgs[1]="images/exterminator.jpg";
    imgs[2]="images/smurf.jpg";
    imgs[3]="images/comete.jpg";
    imgs[4]="images/tiramisu.jpg";
    imgs[5]="images/daiquiri.jpg";
    imgs[6]="images/BlueLagoon.jpg";
    imgs[7]="images/brasilia.jpg";
    imgs[8]="images/nenuphar.jpg";
    imgs[9]="images/angel.jpg";
    imgs[10]="images/whiterussian.jpg";
    imgs[11]="images/cubalibre.jpg";
    imgs[12]="images/margarita.jpg";
    imgs[13]="images/maitai.jpg";
    imgs[14]="images/godmother.jpg";
    
    var min= new Array();
    
    
    min[0]="images/exterminator2.jpg";
    min[1]="images/smurf2.jpg";
    min[2]="images/comete2.jpg";
    min[3]="images/tiramisu2.jpg";
    min[4]="images/daiquiri2.jpg";
    min[5]="images/BlueLagoon2.jpg";
    min[6]="images/brasilia2.jpg";
    min[7]="images/nenuphar2.jpg";
    min[8]="images/angel2.jpg";
    min[9]="images/whiterussian2.jpg";
    min[10]="images/cubalibre2.jpg";
    min[11]="images/margarita2.jpg";
    min[12]="images/maitai2.jpg";
    min[13]="images/godmother2.jpg";
    min[14]="images/sunrise2.jpg";
    
    
    
    
    
    var titre= new Array();
    
    titre[0]="Un classique: le Tequila Sunrise";
    titre[1]="L' Exterminator: l'explosif";
    titre[2]="Le Schtroumpf: notre succès";
    titre[3]="Le Comète: la spécialité";
    titre[4]="Le Tiramisu: un délice";
    titre[5]="Le Daiquiri: la boisson des îles";
    titre[6]="Le Blue Lagoon";
    titre[7]="Le Brasilia";
    titre[8]="Le Nénuphar";
    titre[9]="L' Angel";
    titre[10]="Le White Russian";
    titre[11]="Le Cuba Libre";
    titre[12]="La Margarita";
    titre[13]="Le Maïtaï";
    titre[14]="Le Godmother";
    
    var desc= new Array();
    
    desc[0]="Une valeur sûre pour égailler vos soirées, redécouvrez-le au Karaoké La Comète !";
    desc[1]="Pour tous ceux qui ont le goût de l'aventure et qui n'ont pas froid aux yeux. L'Exterminator vous promet une soirée explosive !";
    desc[2]="Le Schtroumpf a maintenant fait ses preuves depuis longtemps! La gente féminine raffole de son goût sucré qui finit par séduire même les messieurs.";
    desc[3]="La spécialité du bar à gouter à tout prix !";
    desc[4]="Vous aimez le dessert italien? Laissez-vous épater par son équivalent en boisson!";
    desc[5]="Avec son goût citroné le Daiquiri est la boisson idéale de l' été!";
    desc[6]="Un cocktail à base de vodka à découvrir!";
    desc[7]="Laissez vous tenter par la chaleur du Brésil.";
    desc[8]="Un cocktail qui vous laissera frais.";
    desc[9]="Un cocktail à base de gin à découvrir!";
    desc[10]="Un cocktail au goût café.";
    desc[11]="Laissez vous tenter par ce classique.";
    desc[12]="Un cocktail ayant fait ses preuves.";
    desc[13]="Pour les amoureux des agrumes.";
    desc[14]="Pour les passionnés d' amareto!";
    
    
    	var i=0;
    	var txttitre= new Array();
    	
    	txttitre[0]=document.createTextNode(titre[0]);	
    	txttitre[1]=document.createTextNode(titre[1]);
    	txttitre[2]=document.createTextNode(titre[2]);
    	txttitre[3]=document.createTextNode(titre[3]);
    	txttitre[4]=document.createTextNode(titre[4]);
    	txttitre[5]=document.createTextNode(titre[5]);
    	txttitre[6]=document.createTextNode(titre[6]);
    	txttitre[7]=document.createTextNode(titre[7]);
    	txttitre[8]=document.createTextNode(titre[8]);
    	txttitre[9]=document.createTextNode(titre[9]);
    	txttitre[10]=document.createTextNode(titre[10]);
    	txttitre[11]=document.createTextNode(titre[11]);
    	txttitre[12]=document.createTextNode(titre[12]);
    	txttitre[13]=document.createTextNode(titre[13]);
    	txttitre[14]=document.createTextNode(titre[14]);
    	
    	var txtdesc= new Array();
    	
    	txtdesc[0]=document.createTextNode(desc[0]);	
    	txtdesc[1]=document.createTextNode(desc[1]);
    	txtdesc[2]=document.createTextNode(desc[2]);
    	txtdesc[3]=document.createTextNode(desc[3]);
    	txtdesc[4]=document.createTextNode(desc[4]);
    	txtdesc[5]=document.createTextNode(desc[5]);
    	txtdesc[6]=document.createTextNode(desc[6]);
    	txtdesc[7]=document.createTextNode(desc[7]);
    	txtdesc[8]=document.createTextNode(desc[8]);
    	txtdesc[9]=document.createTextNode(desc[9]);
    	txtdesc[10]=document.createTextNode(desc[10]);
    	txtdesc[11]=document.createTextNode(desc[11]);
    	txtdesc[12]=document.createTextNode(desc[12]);
    	txtdesc[13]=document.createTextNode(desc[13]);
    	txtdesc[14]=document.createTextNode(desc[14]);
    
    
    	
    	var imgLength=imgs.length;
    	
    	
    function loadimage(){
    	
    	
    	document.getElementById("image1").src=imgs[i];
    	document.getElementById("image2").src=min[i];
    	document.getElementById("image3").src=min[i+1];
    	document.getElementById("image4").src=min[i+2];
    	document.getElementById("image5").src=min[i+3];
    	document.getElementById("image6").src=min[i+4];
    	document.getElementById("image7").src=min[i+5];
    	document.getElementById("image8").src=min[i+6];
    	document.getElementById("image9").src=min[i+7];
    	document.getElementById("image10").src=min[i+8];
    	document.getElementById("image11").src=min[i+9];
    	document.getElementById("image12").src=min[i+10];	
    	document.getElementById("image13").src=min[i+11];	
    	document.getElementById("image14").src=min[i+12];	
    	document.getElementById("image15").src=min[i+13];	
    	
    	loadtxt();
    		
    }	
    
    
    function loadtxt(){
    	
    	
    	document.getElementById("titre1").appendChild(txttitre[i]);
    	document.getElementById("par").appendChild(txtdesc[i]);
    }
    
    
    function rmvtxt(){
    
    	
    	document.getElementById("titre1").removeChild(txttitre[i]);
    	document.getElementById("par").removeChild(txtdesc[i]);
    }
    
    
    	function imgdroite() {
    	
    
    			rmvtxt();
    			i++;
    			loadimage();
    			
    	}
    	
    	function imggauche(){
    
    			rmvtxt();
    			i--;
    			loadimage();
    		
    		
    	}
    


    j' ai essayé de faire ceci

    function loadimage(){
    	
    	
    	document.getElementById("image1").src=imgs[i%15];
    	document.getElementById("image2").src=min[i%15];
    	document.getElementById("image3").src=min[(i+1)%15];
    	etc...	
    	
    	loadtxt();
    		
    }
    


    mais cela ne donne rien ... je ne sais vraiment pas comment procéder du coup
    • Partager sur Facebook
    • Partager sur Twitter
      28 novembre 2011 à 15:22:41

      Je me suis permis de factoriser un peu le code, un truc comme ça devrait être mieux :

      var imgs = [
          "images/sunrise.jpg",
          "images/exterminator.jpg",
          "images/smurf.jpg",
          "images/comete.jpg",
          "images/tiramisu.jpg",
          "images/daiquiri.jpg",,
          "images/BlueLagoon.jpg",
          "images/brasilia.jpg",
          "images/nenuphar.jpg",
          "images/angel.jpg",
          "images/whiterussian.jpg",
          "images/cubalibre.jpg",
          "images/margarita.jpg",
          "images/maitai.jpg",
          "images/godmother.jpg"
        ],
      
      min = [
        "images/exterminator2.jpg",
        "images/smurf2.jpg",
        "images/comete2.jpg",
        "images/tiramisu2.jpg",
        "images/daiquiri2.jpg",
        "images/BlueLagoon2.jpg",
        "images/brasilia2.jpg",
        "images/nenuphar2.jpg",
        "images/angel2.jpg",
        "images/whiterussian2.jpg",
        "images/cubalibre2.jpg",
        "images/margarita2.jpg",
        "images/maitai2.jpg",
        "images/godmother2.jpg",
        "images/sunrise2.jpg"
      ],
      
      titre = [
        "Un classique: le Tequila Sunrise",
        "L' Exterminator: l'explosif",
        "Le Schtroumpf: notre succès",
        "Le Comète: la spécialité",
        "Le Tiramisu: un délice",
        "Le Daiquiri: la boisson des îles",
        "Le Blue Lagoon",
        "Le Brasilia",
        "Le Nénuphar",
        "L' Angel",
        "Le White Russian",
        "Le Cuba Libre",
        "La Margarita",
        "Le Maïtaï",
        "Le Godmother"
      ],
      	
      desc = [
        "Une valeur sûre pour égailler vos soirées, redécouvrez-le au Karaoké La Comète !",
        "Pour tous ceux qui ont le goût de l'aventure et qui n'ont pas froid aux yeux. L'Exterminator vous promet une soirée explosive !",
        "Le Schtroumpf a maintenant fait ses preuves depuis longtemps! La gente féminine raffole de son goût sucré qui finit par séduire même les messieurs.",
        "La spécialité du bar à gouter à tout prix !",
        "Vous aimez le dessert italien? Laissez-vous épater par son équivalent en boisson!",
        "Avec son goût citroné le Daiquiri est la boisson idéale de l' été!",
        "Un cocktail à base de vodka à découvrir!",
        "Laissez vous tenter par la chaleur du Brésil.",
        "Un cocktail qui vous laissera frais.",
        "Un cocktail à base de gin à découvrir!",
        "Un cocktail au goût café.",
        "Laissez vous tenter par ce classique.",
        "Un cocktail ayant fait ses preuves.",
        "Pour les amoureux des agrumes.",
        "Pour les passionnés d' amareto!"
      ];
      
      var txttitre = [], txtdesc = [];
      
      for (var i = 0, n = titre.length; i < n; i++) {
        txttitre[i] = document.createTextNode(titre[i]);
        txtdesc[i] = document.createTextNode(desc[i]);
      }
      
      function loadimage() {
      
        document.getElementById('image1').src = imgs[cursor];
        for (var i = 1; i < n; i++) document.getElementById('image'+i).src = min[(cursor+i)%n];
      	
        loadtxt();	
      }	
      
      function loadtxt(){	
        document.getElementById("titre1").appendChild(txttitre[cursor]);
        document.getElementById("par").appendChild(txtdesc[cursor]);
      }
      
      
      function rmvtxt(oldcursor){
        document.getElementById("titre1").removeChild(txttitre[oldcursor]);
        document.getElementById("par").removeChild(txtdesc[oldcursor]);
      }
      
      
      function imgdroite() {
        rmvtxt(cursor);
        cursor = (cursor+1)%15;
        loadimage();
      }
      	
      function imggauche(){
      
        rmvtxt(cursor);
        cursor = (cursor-1+15)%15;
        loadimage();
      
      }
      
      var cursor = 0;
      


      Si tu as besoin d'explications n'hésites pas!
      • Partager sur Facebook
      • Partager sur Twitter
        28 novembre 2011 à 21:43:46

        j'ai mis une petite 15ène de minutes mais j' ai compris :) j n'aurais jamais pensé faire ainsi!!!

        Cependant quand je le test cela ne marche pas...
        • Partager sur Facebook
        • Partager sur Twitter
          29 novembre 2011 à 22:16:13

          Personne ne sait pourquoi cela ne fonctionne pas ?
          • Partager sur Facebook
          • Partager sur Twitter

          Défilement d' images

          × 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