Faire défiler des images en boucle.

Par Quentin8, il y a 13 ans

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, il y a 13 ans

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, il y a 13 ans

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, il y a 13 ans

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, il y a 13 ans

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...

duffJohn, il y a 13 ans

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...

Quentin8, il y a 13 ans

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 !