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
Modifié par Miklow (24 Jun 2011 - 18:11)
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)