Faire défiler des images en boucle.

Quentin8
Javascript

Bonjour,
Je me suis inspiré d'un tuto de Grafikart pour faire un système qui fait défiler 5 images à un intervale de 2 sec à l'infini.
Tous marche à merveille, le seul problème c'est qu'une fois que les 5 images on défilées, la première image ne se ré-affiche pas.
Autrement dit, ça ne boucle pas..
J'ai cherché partout, tous essayé, mais je n'y arrive vraiment pas... :/

Voici mon code jQuery :

var stream_tab = {
    nbSlide : 0,
    nbCurrent : 1,
    elemCurrent : null,
    elem : null,
    timer : null,
    init : function(elem){
        this.nbSlide = elem.find("img").length;
        // Initiation du stream_tab
        this.elem=elem;
        elem.find("img").hide();
        elem.find("img:first").show();
        this.elemCurrent = elem.find("img:first");
        // Timer
        this.timer = window.setInterval("stream_tab.next()",2000);
    },
    gotoSlide : function(num){
        if(num==this.nbCurrent){return false;}
        this.elemCurrent.fadeOut();
        this.elem.find("#tab"+num).fadeIn();
        this.nbCurrent = num;
        this.elemCurrent = this.elem.find("#pad"+num);
    },

    next : function(){
        var num = this.nbCurrent+1;
        if(num > this.nbSlide){
            num = 1;
        }
        this.gotoSlide(num);
    },
}
$(function(){
    stream_tab.init($("#bg"));
});

Voici mon code HTML : 

<div id="bg">
            <img id="tab1" src="img/bg/1.jpg"/>
            <img id="tab2" src="img/bg/2.jpg"/>
            <img id="tab3" src="img/bg/3.jpg"/>
            <img id="tab4" src="img/bg/4.jpg"/>
            <img id="tab5" src="img/bg/5.jpg"/>
        </div>

Si quelqu'un pouvais m'aider, ca serait génial ! :)
Merci d'avance !

Bonne journée !

6 réponses

duffJohn
Réponse acceptée

je te met tout le code de mon fichier .html que j'ai créé pour l'occasion:

<head>
    <style type="text/css">
      #bg{width: 960px; height: 600px; overflow:hidden; }
    </style>
  </head>
<div id="bg">
            <img id="tab1" src="img/bg/1.jpg"/>
            <img id="tab2" src="img/bg/2.jpg"/>
            <img id="tab3" src="img/bg/3.jpg"/>
            <img id="tab4" src="img/bg/4.jpg"/>
            <img id="tab5" src="img/bg/5.jpg"/>
        </div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
var stream_tab = {

    nbSlide : 0,
    nbCurrent : 1,
    elemCurrent : null,
    elem : null,
    timer : null,

    init : function(elem){
        this.nbSlide = elem.find("img").length;

        // Initiation du stream_tab
        this.elem=elem;
        elem.find("img").hide();
        elem.find("img:first").show();
        this.elemCurrent = elem.find("img:first");

        // Timer
        this.timer = window.setInterval("stream_tab.next()",2000);
    },

    gotoSlide : function(num){
        if(num==this.nbCurrent){return false;}
        $('#tab'+(num-1)).fadeOut();
        this.elem.find("#tab"+num).fadeIn();
        this.nbCurrent = num;
        this.elemCurrent = this.elem.find("#pad"+num);
    },

    next : function(){
        var num = this.nbCurrent+1;
        if(num > this.nbSlide){
            num = 1;
        }
        this.gotoSlide(num);
    },

}

$(function(){
    stream_tab.init($("#bg"));
});
</script>

Chez moi ca fonctionne nikel...

duffJohn

Debug ta fonction en ajoutant un alert(num); et une alerte sur le nombre de slide dans ta function next comme ceci:

next : function(){
        var num = this.nbCurrent+1;
        if(num > this.nbSlide){
            num = 1;
        }
        alert(num);
        alert(this.nbSlide);
        this.gotoSlide(num);
    }

Une fois que ca ne boucle plus, tu repérera peut etre un soucis.

Sinon je ne comprend pas bien cette ligne vis a vis de ton code... 

this.elemCurrent = this.elem.find("#pad"+num);
Quentin8
Auteur

Bonjour,

Merci de ta réponse.
Je ne l'ai pas dis dans mon post mais j'ai déjà essayé ce debug :
Il m'alert bien tous les bon ID dans le bon ordre (2,3,4,5,1,2,3,4,...) et il me met bien toujours le bon nombre de slides (5).
Par contre le problème c'est que pour les 5 premère images, il m'affiche le bon ID et l'image qui va avec mais dès qu'il est censé bouclé pour revenir à la première image, il boucle bien puisque il m'alert encore bien les bon id mais il n'affiche pas les images qui vont avec.
Autrement dis, quand il devrait retourner à la première image, il alert encore l'ID mais il n'affiche plus l'image qui va avec... C'est bizard..

En effet, la ligne

this.elemCurrent = this.elem.find("#pad"+num);

est inutile. lol

Merci d'avance !

duffJohn

Alors j'ai fait des test j'ai juste modifié la fonction gotoSlide comme ceci

gotoSlide : function(num){
        if(num==this.nbCurrent){return false;}
        $('#tab'+(num-1)).fadeOut();
        this.elem.find("#tab"+num).fadeIn();
        this.nbCurrent = num;
        this.elemCurrent = this.elem.find("#pad"+num);
    },
Quentin8
Auteur

Chez toi en changeant ce code le système marche ?
Parce que moi je l'ai changé et ca ne marche pas, j'ai essayé 2/3 autres choses mais impossible de faire marcher...

Quentin8
Auteur

Bon, je viens de trouver l'erreur.

C'est enfaite juste dans le css de mes img, c'est le position absolute qui faisait beugué.

#bg img{
    display:block;
    width: 50%;
    position:absolute;
    left:0;
    top:0;
    padding:0;
    margin:0;
}

Pourquoi ? Je ne sais pas encore mais j'ai résolue le problème, c'est bon.
En tous cas merci de ton aide ! :)

Bonne journée !