11496 sujets

JavaScript, DOM et API Web HTML5

Je n'arrive pas à rendre continu un bandeau horizontal défilant

Bonjour à tous,

Je débute en code et j'ai un petit problème. J'essaye de faire un bandeau horizontal défilant et infini contenant des images qui renverront à des liens. Mon problème est que mon bandeau n'est pas continu. Je m'explique : quand le bandeau a fait défiler mes éléments, il se termine, disparait, et recommence à zéro. Je voudrais qu'une fois que tous les éléments ont défilé, le bandeau les remettent à la suite en continu.

En clair si j'ai les éléments A B C D, j'aimerais que le bandeau les fassent défiler comme ça : A B C D A B C D A B C D A B.... aujourd'hui, le bandeau fait ça : A B C D A B C D A B C D. Le bandeau recommence et j'aimerais que le bandeau soit continu.

C'est un peu difficile à expliquer, je ne sais pas si je suis clair, donc vous pouvez voir le bandeau ici : http://passionweb.tumblr.com/ et voici un exemple du type de bandeau que j'aimerais faire http://www.sneezemag.com/

Mon code : 

#marquee-wrapper{
height:70px;
position: fixed;
left:0;
width:100%;
bottom: 20px;
background-color:transparent;
z-index:1000000;}
 
#marquee{
position:relative;
padding:10px;
white-space : nowrap;
left:0;
bottom: 20px;
 
#marquee li{
display:inline-block;
margin:0;}
 
#marquee li img:hover{
cursor:pointer;}
 
 
{CustomCSS}
 
</style>
<!-- sticky bottom bar -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function marquee(idWrapper,idMarquee,vitesse)
 
{
    var oIdWrapper=$('#'+idWrapper);
    var oIdMarquee=$('#'+idMarquee);
 
    var width=oIdMarquee.width();
    var width2=oIdWrapper.width();
 
    id_inst=setTimeout(function() {marquee(idWrapper,idMarquee,vitesse)},vitesse);
 
    var l=parseInt(oIdMarquee.css('left'));
    oIdMarquee.css({left [decu]l-1)+'px'});
 
    if((-parseInt(oIdMarquee.css('left')))>=(width))
    {
        oIdMarquee.css({left [decu]width2)+'px'});
    }
}
 
$(document).ready(
function(){
    marquee('marquee-wrapper','marquee',10); //changer le chiffre 10 pour modifier la vitesse <img src="../../bundles/tinymce/vendor/tiny_mce/plugins/emotions/img/clin.png" title=";)" alt=";)">
}
);
$(document).ready(function(){
     $("#marquee-wrapper").hover(function(){
        clearTimeout(id_inst);
    }, function(){
        marquee("marquee-wrapper","marquee",20);
    });
});
 
</script>
</head>
 
<body>
 
<!-- sticky nav -->
<div id='marquee-wrapper'>
<ul id='marquee'>
 
<li>
   <a href="http://www.facebook.fr">
    <img src="http://i.imgur.com/ADbAvzN.png" alt"image1"/>
    </a>
</li>
<li>
     <a href="http://www.twitter.fr">
        <img src="http://i.imgur.com/ADbAvzN.png" alt"image1"/>
    </a>
</li>
<li>
    <a href="http://www.twitter.fr">
        <img src="http://i.imgur.com/ADbAvzN.png" alt"image1"/>
    </a>
</li>
<li>
    <a href="http://www.twitter.fr">
        <img src="http://i.imgur.com/ADbAvzN.png" alt"image1"/>
    </a>
</li>
<li>
    <a href="http://www.twitter.fr">
        <img src="http://i.imgur.com/ADbAvzN.png" alt"image1"/>
    </a>
</li>
</ul>
</div>


Merci pour votre aide et désolé pour le pavé de code, mais je ne savais pas comment vous montrer autrement..
il te faut:
cloner ta liste pour que l'une des parties soit visible lorsque l'autre est cachée.
réduire de moitié les largeurs dans le script et rattraper une partie de celle-ci en marge négative dans le css.
Donner une largeur a tes li : 100/ nbre de li = largeur % (hors clones)
faire disparaitre les espaces via CSS ou HTML.

En gros ça donnerait quelque choses comme ça. http://codepen.io/anon/pen/upxIk ou juste en css des truc comme ça : http://dabblet.com/gist/5656795

Le principe est de cloner le debut de ce que tu veut cloner avec au moins la largeur ou hauteur de la zone defilante.

C'est moche et agaçant hein ! Smiley smile
Merci beaucoup à toi, ça marche nickel, et en plus j'ai compris pas mal de truc ! Smiley cligne Merci encore
Modifié par jgjg (25 Feb 2014 - 07:02)
Sujet clos
Aller à