1. java
  2. android
  3. c#
  4. .net
  5. javascript
  6. php
  7. jquery
  8. html
  9. sql

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.

  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do GUJ!

3 respostas

Não é a resposta que estava procurando? Procure outras perguntas com as tags jquery jsp javascript ou faça a sua própria pergunta.