Bonjour !
J'espère trouver un eu d'aide sur ce forum parce que je suis bloqué sur mon caroussel , je n'arrive pas à obtenir le résultat escompter ...
Voici le résultat que j'aimerais obtenir ( fait sur photoshop ) :
http://img809.imageshack.us/i/carrousel.jpg/
En clair comme sur ce site là :
http://www.games-workshop.com/gws/home.jsp
Mais voila ce que j'obtiens :
http://img222.imageshack.us/i/carrouselbad.jpg/
En clair je n'arrive pas à faire en sorte que les images est un rollover correct ( rectangle beige doit se transformer en rectangle blanc avec la flèche) ,de plus je n'arrive pas à supprimer les numéros qui apparaisse pour y mettre du texte ou à défauts une image comprenant du texte ...
Voici mon code javascript ( même si je ne pense pas qu'il serve ):
et mon css pour le carrousel:
Merci d'avance , j'espère sincèrement trouvé de l'aide ça fait un moment que je cherche sans succès ...
Cordialement.
J'espère trouver un eu d'aide sur ce forum parce que je suis bloqué sur mon caroussel , je n'arrive pas à obtenir le résultat escompter ...
Voici le résultat que j'aimerais obtenir ( fait sur photoshop ) :
http://img809.imageshack.us/i/carrousel.jpg/
En clair comme sur ce site là :
http://www.games-workshop.com/gws/home.jsp
Mais voila ce que j'obtiens :
http://img222.imageshack.us/i/carrouselbad.jpg/
En clair je n'arrive pas à faire en sorte que les images est un rollover correct ( rectangle beige doit se transformer en rectangle blanc avec la flèche) ,de plus je n'arrive pas à supprimer les numéros qui apparaisse pour y mettre du texte ou à défauts une image comprenant du texte ...
Voici mon code javascript ( même si je ne pense pas qu'il serve ):
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éer 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);
*/
this.elemCurrent.fadeOut();
this.elem.find("#slide"+num).show();
this.elem.find("#slide"+num).hide().fadeIn();
var titleHeight = this.elemCurrent.find(".title").height();
this.elemCurrent.find(".title").animate({"bottom":-titleHeight},500);
this.elem.find("#slide"+num+" .title").css("bottom",-titleHeight).animate({"bottom": 0},500);
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 = Number(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()",4000);
}
}
$(function(){
carrousel.init($("#carrousel"));
});
et mon css pour le carrousel:
#carrousel{
border:solid 2px #CDC3A2;
width:975px;
height:331px;
margin:44px 0 0 10px;
position:relative;
overflow:hidden;
}
.slide{
position:absolute;
top:0;
left:0;
width:975px;
height:331px;
}
.title{
position:absolute;
height:35px;
bottom:0;
left:0;
width:975px;
padding-left:15px;
line-height:35px;
background:url(theme/barre_carrousel.png);
color:#000000;
font-size:18px;
}
.navigation{
position:absolute;
top:-1px;
}
.navigation span{
position:relative;
background:url(theme/case_carrousel_double.png) no-repeat;
padding:45px 160px;
cursor:pointer;
height:168px;
width:337px;
display:block;
}
.navigation span:hover,.navigation span.active{
background:url(theme/case_carrousel_double.png) no-repeat;
background-position:bottom-left;
}
}
Merci d'avance , j'espère sincèrement trouvé de l'aide ça fait un moment que je cherche sans succès ...
Cordialement.