Versão atual:

Colocar os divs iniciais ao final de um rolamento automatico com jQuery / repetir conteudo.

Tenho uma lista de 54 logos, que precisam ser exibidos dinamicamente num espaço pequeno.

O que eu fiz até então foi:

  • Fiz um script em javascript para que eles ficassem alinhados horizontalmente numa <div id="logos">.
  • Coloquei essa <div id="logos"> dentro de uma menor <div id="logos-container"> para que aparecesse a opção de barra de rolagem horizontal na <div id="logos-container">.
  • Fiz um script em jQuery para mover essa barra de rolagem para a esquerda, um logo por vez, a cada intervalo de meio segundo.

Até aí, tudo ok. Quando chega no final da barra de rolagem coloquei condicionais para a barra de rolagem voltar no começo e repetir o processo.

Mas na verdade eu queria que ela continuasse rolando para a esquerda, exibindo os logos desde o inicio de novo. Como faço para que ele mova a barra de rolagem indefinidamente, repetindo o conteudo?

A página é em jsp e fiz ajustes no css e js para que isso tudo se ajustasse aos diferentes layouts que o site tem em diferentes tamanhos de tela.

A parte do código jQuery para essa dinamica dos logos está mais ou menos assim:

<script> 
$(document).ready(function(){

    function animatelogosLeft(){
        var position = $("#logos-container").scrollLeft();                    
        $("div#logos-container").animate({scrollLeft: position + 70 }, 500);                           
                // move a barra de rolagem 70px (1 logo)
    }

    //função com as restrições de tamanho de tela e de voltar ao inicio
    function animatelogos() {
        if(window.innerWidth >= 992){
            if( $("#logos-container").scrollLeft()>=560){
               $("#logos-container").animate({scrollLeft: 0 }, 500);
            }
            else{
               animatelogosLeft();
            }
        }
        else{
            //numero de logos visiveis no tamanho da tela
            var numLogos = Math.floor((window.innerWidth-30)/70);
            var scrollMax = ( 28 - numLogos )*70;
            if( $("#logos-container").scrollLeft()>=scrollMax){
                $("div#logos-container").animate({scrollLeft: 0 }, 500);
            }
            else{
                animatelogosLeft();
            }
        }
    }

    $('#logos-container').stop(true, false);
    var timerLogos = 0;
    timerLogos = setInterval(animatelogos, 1000);

});

</script>

E para alinhar os logos horizontalmente:

<script type="text/javascript">
function tamanho(){
    // Para dispor os logos na horizontal - 70px cada logo, 14 é o numero de colunas.                                                                    
    document.getElementById("logos").style.width = 70*14+"px";                 

    if( window.innerWidth >= 992 ){
    // caracteristicas deste tamanho de tela
    // caracteristicas para retomar no caso de diminuir a tela e aumentar de volta
    }                                                               
    else{
    // caracteristicas deste tamanho de tela
    // quantos logos (divisao inteiro) cabem no tamanho da janela
    // para centralizar a div dos logos.
    }
}
window.onresize = tamanho;
</script>

Dificil de explicar, espero que tenha ficado claro. :/ Abraços.

Versões(2):

Ver a versão formatada

Colocar os divs iniciais ao final de um rolamento automatico com jQuery / repetir conteudo.

Comentário

new question