Défilement image en continu

Bonjour,

Je bloque sur un problème depuis quelques temps déjà, dans un premier temps j'avais mis des boutons suivant, précédent, que j'ai ensuite enlevé pour avoir un défilement constant.

Jusque là ça marche, sauf que j'aimerais que le défilement soit continue, là, il y a un blanc entre le moment où le defilement arrive au bout et celui où il reprend, et je ne vois pas comment régler ce problème.

Voici le lien vers la page de démo : http://www.jeanphilippebellon.com/vincent/phototheque/

Voici comment se présente la galerie :

<div id="slider">
   <div id="gallery_content">
      <a><img/></a> * 20 (par exemple)         
   </div>
</div>

Et voici mon JS :

        var slide = {
            nbCurrent : null,
            elem : null,
            nbSlide : null,
            nbPicture : null,
            largeurCache : null,
            init : function(elem){
                this.elem=elem;
                nbCurrent = 0;
                nbPicture = 0;
                $("#gallery_content > a").each(function(){
                   nbPicture += 1;
                });
                nbSlide = Math.floor((nbPicture*80)/400)-1;
                largeurCache = parseInt($('#slider').width());
                $('#gallery_content').css('width',nbPicture*80);
                
            },
            gotoslide : function(num){
                var cssfin = {"margin-left" : -1600+"px" };
                $("#gallery_content").animate(cssfin,10000,'linear',function(){
                    $("#gallery_content").css({'margin-left':'420px'});
                });
                
            }
        }
        $(function(){
			if(screen.width < 1680){
				$("#gallery_content > a").each(function(){
					var href = $(this).find('img').attr("alt");
					$(this).attr('href',href);
					$(this).attr('rel','zoombox[galerie1]');
                });
			}
            slide.init($("#slider"));
            slide.gotoslide(1);
            setInterval('slide.gotoslide(1)',10100);
        });

Le CSS :

a, img {
            border: none;
        }
        #conteneur {
            width: 1024px;
            margin: 0 auto;
            text-align: center;
        }
        #slider {
            width: 419px;
            height: 75px;
            overflow: hidden;
            padding : 5px 3px 5px 3px;
            position: relative;
            border: 1px solid #000;
        }

        #slider a {
            margin: 0 5px 0 0;
        }
        #gallery_content a {
            display: block;
            float: left;  
        }

Je me disais qu'en créant deux div et en replaçant la première à la fin dès qu'elle est masquée cela pourrait le faire, mais je vois pas comment faire.

Merci d'avance pour votre aide.

dans l'idée c'est ça!

exemple: http://javatwist.imingo.net/defilim.php

regarde dans le code cette partie:

//|||||||||||||||||||||||
//Déplacement des images|
//|||||||||||||||||||||||
function go(){

[#red]// parcours du tableau d'images[/#]
for(j in tab){
	lf=parseInt(tab[j].style.left);
	[#red]// largeur de l'image[/#]
	w=tab[j].width;
	[#red]// position de l'image augmentée [/#]
	[#red]// de la variable de déplacement[/#]
	tab[j].style.left=lf+val+"px";
	[#red]// si la position de l'image dépasse [/#]
	[#red]// la longueur de la chaîne d'images[/#]
	if(lf>pos-w){
		[#red]// on la replace au début de la chaîne[/#]
		tab[j].style.left=lf-pos+"px"
	};
	[#red]// si la position de l'image est inférieure
	// à la largeur de la boîte moins la longueur
	// de la chaîne d'images[/#]
	if(lf<W-pos){
		[#red]// on la replace en fin de chaîne[/#]
		tab[j].style.left=lf+pos+"px"
	};
}

timer=setTimeout("go()",delai)
}

à adapter;
Modifié par Javatwister (22 Jan 2011 - 08:00)