Concernant le tutoriel CARROUSSEL

Ce sujet est résolu
Default
,

Bonjour à tous

Je fais actuellement le tutoriel CARROUSSEL mais alors que tout fonctionnait bien, la bannière avec toutes les images se met à s'emballer dès que je passe la sourie dessus. Plus exactement le défilement se stop lorsque je passe la souris dessus mais une fois le mouse reparti le carroussel se met à clignoter ou alors au lieu de passer à l'image suivant il réafiche l'image précédente...ect voici les codes que j'ai entrée.

CODE JS ----------------

/*

CARROUSSEL JS

*/

var carroussel = {

nbSlide : 0,

nbCurrent : 0,

elemCurrent : null,

elem : null,

timer : null,

init : function(elem){

this.nbSlide = elem.find('.slide').length;

// Créer la pagination

elem.append('

');

for(var i=1;i<=this.nbSlide;i++){

elem.find('.navigation').append(''+i+'');

}

elem.find('.navigation span').click(function(){carroussel.gotoSlide($(this).text()); })

// Initialisation du carroussel

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

carroussel.play();

// Stop quand on passe dessus

elem.mouseover(carroussel.stop);

elem.mouseout(carroussel.play);

},

gotoSlide : function(num){

if(num==this.nbCurrent){return false; }

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(carroussel.timer);

},

play : function(){

window.clearInterval(carroussel.timer);

this.timer = window.setInterval('carroussel.next()',4000);

}

}

$(function(){

carroussel.init($('#carroussel'));

});

CODE CSS -----------------------------------

#carroussel {

height:300px;

width:980px;

border:5px solid #CCC;

background-color:#FFF;

postion: relative;

}

.slide {

position:absolute;

width:980px;

height:300px;

}

.title {

position:absolute;

line-height:35px;

padding-left:10px;

height:35px;

bottom:0;

left:0;

width:970px;

background:url(Pics/bg_titre.png) top left repeat;

}

.navigation {

position:absolute;

bottom:156px;

right:192px;

}

.navigation span{

background:#000;

color:#FFF;

padding:2px 4px;

cursor:pointer;

}

.navigation span:hover,.navigation span:active{

background:#FFF;

color:#000;

}

CODE HTML -----------------------------

#carroussel {

height:300px;

width:980px;

border:5px solid #CCC;

background-color:#FFF;

postion: relative;

}

.slide {

position:absolute;

width:980px;

height:300px;

}

.title {

position:absolute;

line-height:35px;

padding-left:10px;

height:35px;

bottom:0;

left:0;

width:970px;

background:url(Pics/bg_titre.png) top left repeat;

}

.navigation {

position:absolute;

bottom:156px;

right:192px;

}

.navigation span{

background:#000;

color:#FFF;

padding:2px 4px;

cursor:pointer;

}

.navigation span:hover,.navigation span:active{

background:#FFF;

color:#000;

}

Si quelqu'un arrive à trouver d'où peut venir le problème.....

5 Réponse

6069
,

CODE 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").css("opacity",0.6);
        this.elem.find(".navigation span:first").addClass("active");


        // 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;}
        this.elemCurrent.find(".visu").fadeOut();
        this.elem.find("#slide"+num).show();
        this.elem.find("#slide"+num+" .visu").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=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()",7000);
    }
}
$(function()
{
    carrousel.init($("#carrousel"));
});

CODE HTML

<div id="carrousel">
    <div id="slide1" class="slide">
        <div class="visu">
            <img src="img/carrousel/01.jpg" alt="" />
        </div>
        <div class="title">
            Un titre
        </div>
    </div>
    <div id="slide2" class="slide">
        <div class="visu">
            <img src="img/carrousel/02.jpg" alt="" />
        </div>
        <div class="title">
            Un titre en deuxième
        </div>
    </div>
    <div id="slide3" class="slide">
        <div class="visu">
            <img src="img/carrousel/03.jpg" alt="" />
        </div>
        <div class="title">
            Un titre en troisième
        </div>
    </div>
</div>

Essaye avec ça !

Default
,

Merci de ta réponse.

Je vais essayer ça en début de soirée et je te dis si ça fonctionne.

Default
,

Merci le code marche bien mis à part pour deux choses :

1/ Tu n'as pas fais le code pour le défilement latéral des images, et du coup j'ai essayé mais pas mals de beugs

2/ Je recherche actuellement le problème car lorsque l'image change les titres casi normalement si ce n'est que l'ancien titre reste en dessous de l'image... je ne sais pas si tu vois...un peu comme si le titre précedent se retrouvait 30px plus bas et du coup il se superpose avec le titre précédent. Le titre courant lui se place bien avec la bonne animation.

Une petite idée sur la question?

En tout cas merci de ton code

394
,

Tu ferais bien de lire les commentaires en bas du tutoriel, la réponse a surement été donner au moins 2 fois.

Default
,

Ok...ça me rappelle un peu le dictionnaire Larousse. Quand on cherche une définition il renvoie à un mot tout aussi compliqué...autrement dit réponse qui sert à rien.

Merci quand meme