Forum : Concernant le tutoriel CARROUSSEL

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('<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(){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;
}

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

5 réponses

antleblanc

Réponse acceptée

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 !

Danieldeboca

Auteur

Réponse acceptée

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

Danieldeboca

Auteur

Réponse acceptée

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

Badbart

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

Danieldeboca

Auteur

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