11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

voilà je viens de suivre un tuto jQuery qui permet de créer des images défilante, tous se passe plus ou moins bien sauf que :

- les images défile toutes les 5 sec et si je casse la chaine du défilement en voulant passé d'une image à l'autre grâce au bouton.
Mon carrousel se met à planter et il défile les images une à la suite des autres enfin rien de bien beau.
Il faut que je refresh pour régler le problème.

Merci d'avance, si vous avez des solutions

voici le code

/*
	CARROUSEL JS
*/

var carrousel = {

	nbSlide : 0,
	nbCurrent : 1,
	elemCurrent : null,
	elem : null,
	timer : null,

	init : function(elem){
		this.nbSlide = elem.find('.slide').length;
		
		// Créer la pagination
		elem.append('<div class="navigation"></div>');
		for(var i=1;i<=this.nbSlide;i++){
			elem.find('.navigation').append('<span>'+i+'</span>');
		}
		elem.find('.navigation span').click(function(){ carrousel.gotoSlide($(this).text());})
		
		// Initialisation du carrousel
		this.elem=elem;
		elem.find('.slide').hide();
		elem.find('.slide:first').show();
		this.elemCurrent = elem.find('.slide:first');
		this.elem.find('.navigation span:first').addClass('active');
		
		// On cré le timer
		carrousel.play(carrousel.stop);
		
		// stop passe dessus
		elem.mouseover(carrousel.stop);
		elem.mouseout(carrousel.play);
	},
	
	gotoSlide : function(num){
		if(num==this.nbCurrent){ return false;}
		
		/* Animation fade in fadeout*/ 
		this.elemCurrent.fadeOut();
		this.elem.find('#slide'+num).fadeIn();
		this.elem.find('.navigation span').removeClass('active');
		this.elem.find('.navigation span:eq('+(num-1)+')').addClass("active");
		this.nbCurrent = num;
		this.elemCurrent = this.elem.find('#slide'+num);

	},
	
	next : function(){
		var num = this.nbCurrent+1;
		if(num>this.nbSlide){
			num = 1;
		}
		this.gotoSlide(num);
	
	},
	prev : function(){
		var num = this.nbCurrent-1;
		if(num<1){
			num = this.nbSlide;
		}
		this.gotoSlide(num);
	},
	
	stop : function(){
		window.clearInterval(carrousel.timer);
		},
	play : function (){
	window.clearInterval(carrousel.timer);
	this.timer = window.setInterval('carrousel.next()',5000);
	}
}
$(function(){
	carrousel.init($('#carrousel'));
	});

Modifié par Miklow (24 Jun 2011 - 18:11)