11548 sujets

JavaScript, DOM et API Web HTML5

Jquery probleme de debutant

Bonjour a tous,

Je viens vers vous car j'ai un soucis de logique et comprehension.

le besoin: j'ai des images les unes derriere les autres et je dois les faire defile comme un diaporama, lorsque la dernier image est affiche je veux defile dans l autre sens et c'est la que ca coince car sois j arrive a retourner une image en arriere et ensuite ca repart en avant, soit ca defile d un trait en arriere.

je m'y prend surement tresmal, alors si une ame charitable avait la gentillesse de m'expliquer ca serait gentil Smiley confused 

// JavaScript Document
//au chargement du document et si jquery et present
$(document).ready(function(){


s = new slider("#galerie");

})


var slider = function(id)
{
	//creation de la variable intermediaire self qui pemettra de ranger la largeur total de toute les vignettes
	var	self=this;
	 //la variable this.div sera egal a l'id de du div passe en variable (s = new slider("#galerie"))
 	this.div = $(id);
	 // creation de la variable slider qui correspond a un element qui as la classe slider
	 this.slider = this.div.find(".slider");
 	//creation de la variable largeuCache dans laquelle on enregistre la largeur de la div passe en fonction
	this.largeurCache = this.div.width();	

	//creation et initialisation a zero du nombre de largeur
	this.largeur=0;
	//il faut trouver la largeur total de toute les images donc il faut trouver le nombre d'image et le rajouter a sa largeur a chaque fois que l on trouve une image
	this.div.find('img').each(function()
	{
	self.largeur+=$(this).width();
	});

//la largeur du saut est egal a la largeur de l image
this.saut = this.largeurCache;

//le nombre de saut est egal la largeur/par le saut arrondi par math.ceil()
this.nbEtapes = Math.ceil(this.largeur/this.saut - this.largeurCache/this.saut);
this.courant=0;
this.direction="gauche";					
				setInterval(	function bouge()
					{
					if (self.direction == "gauche")
							{
							if(self.courant < self.nbEtapes)
								{		
										self.courant++;
										alert(self.courant);
										self.slider.animate({ left: -self.courant*self.saut },3000);
										
								}
								else if(self.courant==self.nbEtapes)
								{
									alert("le nombre d etape est atteint");
									self.direction = "droite";
									alert(self.courant);
									
									self.courant = 0;
								}
							}
						
					if (self.direction == "droite")
							{
								if(self.courant < self.nbEtapes)
								{
										self.courant++;
										alert(self.courant);
										self.slider.animate({ left: -self.courant*self.saut },3000);
									}
									else if(self.courant==self.nbEtapes)
										{
											alert(self.courant);
											alert("le nombre d etape est atteint");
											self.direction = "gauche";
											self.courant = 0;
										}
								}
						
					},5000);



le css

@charset "UTF-8";
/* CSS Document */


#galerie{
	background:#fff;
	width:625px;
	height:180px;
	overflow:hidden;
	position:relative;
	
}
.slider{
	width:5000px;
	height:177px;
	position:absolute;
	
}


et le html

<!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=UTF-8" />
<link rel="stylesheet" type="text/css" href="slider.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="slider.js"></script>

<title>Document sans titre</title>
</head>

<body>

<div id="galerie" class="galerie">
	<div class="slider">
        <img src="image/vignette promo/promo_vignette_info.png"></img>
        <img src="image/vignette promo/promo_vignette-wii.png" ></img>
        <img src="image/vignette promo/promo_vignette_info.png" ></img>

  </div>
</div> 
</body>
</html>
Essaie un truc comme ça( deuxième partie de ta fonction).
  if (self.direction == "droite") 
                            { 
                                if(self.courant < self.nbEtapes) 
                                { 
                                   self.courant++; 
                                        self.slider.animate({ left: -(self.nbEtapes-self.courant)*self.saut },1000); 
                                             
                                    } 
                                    else if(self.courant==self.nbEtapes) 
                                        { 
                                            self.direction = "gauche"; 
                                            self.courant = 0; 
                                        } 
                                }


Pour débugger, utilise 'console.log' avec firebug ou équivalent, c'est moins pénible que les 'alert'. Smiley cligne
Merci, de ta reponse en fait j'ai resolu mon soucis comme un grand Smiley lol , avec une feuille de papier un stylo et un croquis, ca m'as permis de pondre un bout de code qui fonctionne.

je le mets si quelqu'un en as besoin meme si il y a surement plus court a faire, moi ca m'as permis surtout de comprendre les fontions et les appels.

c'est un peu long mais j ai beaucoup commente.


// JavaScript Document
//au chargement du document et si jquery et present
$(document).ready(function(){


s = new slider("#galerie");

})


var slider = function(id)
{
	//creation de la variable intermediaire self qui pemettra de ranger la largeur total de toute les vignettes
	var	self=this;
	 //la variable this.div sera egal a l'id de du div passe en variable (s = new slider("#galerie"))
 	this.div = $(id);
	 // creation de la variable slider qui correspond a un element qui as la classe slider
	 this.slider = this.div.find(".slider");
 	//creation de la variable largeuCache dans laquelle on enregistre la largeur de la div passe en fonction
	this.largeurCache = this.div.width();	

	//creation et initialisation a zero du nombre de largeur
	this.largeur=0;
	
	this.nbImg=0;
	//il faut trouver la largeur total de toute les images donc il faut trouver le nombre d'image et le rajouter a sa largeur a chaque fois que l on trouve une image
	this.div.find('img').each(function()
									   {
								 		 self.largeur+=$(this).width();
										 self.nbImg++;
								 		 });
	

//la largeur du saut est egal a la largeur de l image
this.saut = this.largeurCache;
//le nombre de saut est egal la largeur/par le saut arrondi par math.ceil()
this.nbEtapes = Math.ceil(this.largeur/this.saut - this.largeurCache/this.saut);
//le deplacement en court vers la gauche
this.deplacement=0;
// le retour vers la droite
this.retour=0;
//la direction du deplacement
this.direction="gauche";
				// la fonction se lance toute les ..secondes	
				setInterval(	function bouge()
					{
                                       //si gauche
					if( self.direction=="gauche")
						{
							//si deplacement plus petit que nbre d img -1
							if(self.deplacement<self.nbImg-1)
							{
                                                                //incremente le deplacement
								self.deplacement++;
                                                               //anime
								self.slider.animate({ left: -self.deplacement*self.saut },10000);
							}
                                                        // sinon
							else
							{
                                                             //change la direction
								self.direction="droite";
                                                             // le retour est egal au nombre d img -1
								self.retour=self.nbImg-1;
							}
							
						}// si direction est droite
						if(self.direction=="droite")
						{
                                                       //si retour est plus petit ou egal plus petit que nbre d img -1
							if(self.retour<=self.nbImg-1)
							{
                                                               // mais plus grand que 0 quand meme
								if(self.retour>0)
                                               
								{
                                                                //decremente retour
								self.retour--;
                                                                //anime
								self.slider.animate({ left: -self.retour*self.saut },10000);
								}
                                                               //sinon
								else
							{
                                                              //change la direction
								self.direction="gauche";
                                                              //le deplacement est remis a 0
								self.deplacement=0;
							}
							}
                                                         //sinon
							else
							{
                                                              //change la direction
								self.direction="gauche";
                                                             //le deplacement est remis a 0
								self.deplacement=0;
							}
						}
						
					},3000);
Sujet clos
Aller à