11522 sujets

JavaScript, DOM et API Web HTML5

Obligé cliquer deux fois pour changer d'image

[RÉSOLUE] Bonjour, j'ai un petit problème avec le slider pour mon site que je suis entrain de crée.
Il marche parfaitement pour le moment à l’exception d'un petit problème que je n'arrive pas à régler. J'ai longtemps chercher comment faire mais impossible de trouver un problème similaire au miens sur d'autre forum. Sans doute car je débute et que mon erreur dois être simple à régler Smiley ravi . Mon slider à deux flèche, ( droite et gauche ) qui servent à faire défiller les images.
la flèche de droite marche parfaitement mais celles de gauche à besoins d'être cliqué deux fois pour qu'elle fonctionne ( pas un double clique, les deux cliques peuvent être espacer de plusieurs secondes ). ce problème est uniquement quand je suis sur ma première image et que je veut revenir à la dernière ( voir "prev" )
Merci d'avance d'avoir jeter un coup d'oeuil à mon code.
Kévin.


$(document).ready(function() { 
	slider.init ();

});

slider = {
	init: function() {
		slider.elem = $("#head_slider_contenue");
		slider.nbSlide = slider.elem.find("object").lenght;
		slider.current = 0;

		$("#head_slider_fleche_gauche").click (function(){
			slider.prev() });
		$("#head_slider_fleche_droite").click (function(){
			slider.next();

		});
	},

	prev: function(){
		slider.current--;

		if (slider.current < 0 )
		{
			slider.current = 3;
			slider.elem.animate ({marginLeft: "0px"});
		}
		else
		{
		slider.elem.animate ({marginLeft: -slider.current*806+"px"});
		}
	},


	next: function(){
		slider.current++;
		if (slider.current > 2 ) 
		{
			slider.current = 0;
			slider.elem.animate ({marginLeft: "0px"});
		}
		else
		{
		slider.elem.animate ({marginLeft: -slider.current*806+"px"})};
	}
}

Modifié par neelix (23 Feb 2019 - 23:40)
voila le code html, pour le jsfiddle j'ai commencer la programmation il y a 1 semaine je ne sais pas ce que c'est désolé Smiley ohwell 

<!DOCTYPE html>
<html>
<!-- interne au site sans le voir -->
<head>
	<title>Fenderace</title>
	<link rel="stylesheet" type="text/css" href="CSS/styles.css">
	<script type="text/javascript" src="JS/jquery.js"></script>
</head>
<!-- HEADER-->
<header>

</header>



<!-- LES DIVs -->
										<!-- Haut de page -->
<div id="contenue">

	<div class="div1"> 
		<nav> <ul> <li> <a href="#"> <img class="logo" src="IMG/fenderace.png" style="position: absolute;z-index: 4"></a> </li> </ul> </nav>
	</div>

	<div class="div2">
		<img class="hdp"  src="IMG/hautdepage.png"style="position: absolute;z-index: 2" >
	</div>

	<div class="div3"> <p>teste</p>
	</div>

										<!-- Slider -->

	<div class="box_slider" id=" head_slider">

	<div id="head_slider_fleche_droite"> <img src="IMG/flecheD.png" style="position: absolute;z-index: 5"> </div>
	<div id="head_slider_fleche_gauche"> <img src="IMG/flecheG.png" style="position: absolute;z-index: 5"> </div>

	<div id="head_slider_contenue" >
	<img src="IMG/125cr1.png">
	<img src="IMG/125cr2.png">
	<img src="IMG/125cr3.png">
	</div>
	 </div>
</div>
<!-- contient l'ensemble de la page -->
<body>
 <body class="backimg" background="IMG/arplan.png">

</body>

</html>

Modifié par neelix (22 Feb 2019 - 23:55)
Modérateur
Salut,

Quand tu es sur la première image, ton margin-left n'est pas déjà à 0 par hasard ?

A mon avis Il faudrait plutôt le remettre slider.current à 2 et margin left à 
-slider.current*806+"px"
au lieu de 0 non ? Et on peut même factoriser un peu du coup :

prev: function(){
		slider.current--;
		if (slider.current < 0 )
		{
			slider.current = 2;
		}
		slider.elem.animate ({marginLeft: -slider.current*806+"px"});
	},


Et au passage c'est quoi ce :
<!-- contient l'ensemble de la page -->
<body>
 <body class="backimg" background="IMG/arplan.png">

</body>

????????
tout le code html de ta page (le header et les divs) doit être entre <body> et </body> et il n'en faut qu'un !
Salut, allan00958.
mes fichers CCS / html / javascript son bien tous séparer dans différents dossier.

Merci infiniment _laurent tu à résolus mon problème !
je vais remettre le header et les divs dans le body je galère encore un peu mais sa va s'améliorer je l’espère.
en tous cas merci à tous et surtous à toi laurent.
Hello

Je parlais pas des fichiers.

Il ne devrait pas avoir de CSS ni de JS dans le code HTML. Donc ceci est à éviter (l'utilisation de la balise style)


<div id="head_slider_fleche_droite"> <img src="IMG/flecheD.png" style="position: absolute;z-index: 5"> </div>


Sinon, content que le problème soit résolu
Sujet clos
Aller à