11548 sujets

JavaScript, DOM et API Web HTML5

[jQuery] slideshow qui s'emballe après stop()

Bonjour à tous amis alsanautes.

J'ai un problème sur le slideshow que je suis en train de créer.
J'ai 4 bannières qui défilent de haut en bas.
Une fois arrivé à la dernière images elles remontent à la première image.
En passant la souris dessus, le slideshow s'arrete. Si une animation était en cours, l'image remonte à la dernière position "correcte" connue.
Quand la souris ressort du slideshow, celui-ci reprend son processus.

Mon problème arrive dans cette dernière partie:
Si ma souris entre dans mon bloc pendant un slide, quand elle ressort tout va bien, l'animation suit son cours.
Mais si elle rentre dans le bloc quand l'image est fixe, alors 9 fois sur 10 l'animation s'emballe et défile à des vitesses aléatoires. Smiley sweatdrop

Je vous met le code:

<div id="visible">
			<div id="slides" style="top: -438px;">
				<div id="slide_4" class="banner ">
				
				</div>
				<div id="slide_3" class="banner">
				
				</div>
				<div id="slide_2" class="banner">
				
				</div>
				<div id="slide_1" class="banner">
				
				</div>
			</div>
			<div id="bloc_droite">
				<ul>
					<li id="titre_slide_1" class="active">Bla bla bla</li>
					<li id="titre_slide_2">Bli bli bli</li>
					<li id="titre_slide_3">Blou blou blou</li>
					<li id="titre_slide_4">blu blu blu</li>
				</ul>
			</div>
		</div>


et le js:

var currentPosition = 1;
		var n = 0;
		var slides = $('.banner');
		var liBanner = $('#bloc_droite li');
		var slidesCount = slides.length;
		var obj = $(this);
	
		function deplacement(){
			var delai = 5000;
			var duree = 500;
				if(currentPosition == slidesCount){
					currentPosition = 0;
					$('#slides').delay(delai).animate({top: '-438px'}, duree, function(){
						$("#bloc_droite li:first-child").addClass("active");
						$("#bloc_droite li:last-child").removeClass("active");
						deplacement();
					});
				}else{
					$('#slides').delay(delai).animate({top: '+=146'}, duree, function(){
						$("#bloc_droite li.active").next().addClass("active").prev().removeClass("active");
						deplacement();
					});
				}
				currentPosition++;
		}
		
		deplacement();
		
		$('#bloc_droite li').click( function(){
			var num = $(this).index();
			var multiply = (slidesCount - num - 1)*(-146);
			$('#slides').animate({top: multiply + 'px'}, 500);
			liBanner.removeClass('active');
			$(this).addClass('active');
		});
		
		$('#visible').mouseenter( function(){
			$('#slides').stop(true, false);
			var num = $('#bloc_droite li.active').index();
			var multiply = (slidesCount - num - 1)*(-146);
			$('#slides').animate({top: multiply + 'px'}, 200);
		});
		
		$('#visible').mouseleave( function(){ 
			currentPosition = $('#bloc_droite li.active').index();
			currentPosition = currentPosition + 1;
			deplacement();
		});


Et pour finir, le css:

#visible{
	width: 750px;
	height: 146px;
	margin: 50px auto;
	position: relative;
	overflow: hidden;
	background: #f1f1f1;
}

#bloc_droite{
	width: 191px;
	height: 136px;
	position: absolute;
	right: 0;
	top: 0;	
	padding: 10px 0 0 10px;
	background: rgb(202,224,239);
}

#bloc_droite ul{
	list-style-type: none;
	color: #727272;
	padding: 0;
}

#bloc_droite ul li{
	margin: 5px 0;
	width: 191px;
	padding: 0 0 0 20px;
	float: right;
	cursor: pointer;
}

#bloc_droite ul li.active{
	background: rgba(11, 100, 170, 0.37);
	color: #fff;
}

.banner{
	width: 549px;
	height: 146px;
}

#slides{
	position: absolute;
	left: 0;
}

#slide_1{
	background: url('../img/img_1.jpg');
}

#slide_2{
	background: url('../img/img_2.jpg');
}

#slide_3{
	background: url('../img/img_3.jpg');
}

#slide_4{
	background: url('../img/img_4.jpg');
}


Voilà vous savez tout.
Est-ce que quelqu'un peut m'expliquer pourquoi ça s'emballe, ou est-ce que j'ai fauté, etc, je lui en serai très reconnaissant ! Smiley biggrin
Non ? Personne ?

En fait je pense que je lance la fonction deux fois au moment du mouseleave, mais je ne sais pas pourquoi, et surtout comment l'en empecher. J'ai essayé une condition en début de fonction avec un return false, mais ça ne change rien.
Bonjour,

J'ai eu ce genre de problème sur un carrousel.

Je l'ai réglé en faisant ... dans ton cas ce serait:


$('#visible').unbind("mouseenter").bind("mouseenter", function()


et

$('#visible').unbind("mouseleave").bind("mouseleave", function()


Etant vraiment novice je ne te garanti pas le résultat;

mais en tous cas ça a réglé le problème "d'affollement" sur mon carrousel.
Sujet clos
Aller à