chabinot
Messages postés317Date d'inscriptionmardi 10 novembre 2015StatutMembreDernière intervention 9 mars 2023
-
1 avril 2017 à 15:51
Bonjour,
J'ai trouvé un exemple de slideshow qui marche très bien. Cependant, j'ai un petit problème :
J'ai une suite de numéro qui va de 1 à 9 représentant chacun une image.
Quand je clique sur le numéro 5, il affiche bien l'image 5, puis, au lieu de m'afficher l'image suivante, à savoir l'image 6, il retourne à la première image.
Voici mon code javaScript :
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").css("opacity",0.6); // On rend la navigation opaque
this.elem.find(".navigation span:first").addClass("active");
// On cré le timer
carrousel.play();
// Stop quand on passe dessus
elem.mouseover(carrousel.stop);
elem.mouseout(carrousel.play);
},
gotoSlide : function(num){
if(num==this.nbCurrent){ return false; }
/* Animation en fadeIn/fadeOut
this.elemCurrent.fadeOut();
this.elem.find("#slide"+num).fadeIn();
*/
/* Animation en slide
var sens = 1;
if(num<this.nbCurrent){ sens = -1;}
var cssDeb = { "left" : sens*this.elem.width() };
var cssFin = { "left" : -sens*this.elem.width() };
this.elem.find("#slide"+num).show().css(cssDeb);
this.elem.find("#slide"+num).animate({"top":0,"left":0},500);
this.elemCurrent.animate(cssFin,500);
/*
Animation Titre + Fadein/Out sur la div visu
*/
this.elemCurrent.find(".visu").fadeOut(1500);
this.elem.find("#slide"+num).show();
this.elem.find("#slide"+num+" .visu").hide().fadeIn(1500);
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);
carrousel.timer = window.setInterval("carrousel.next()",3500);
}
}
$(function(){
carrousel.init($("#carrousel"));
});