/* Marquee em JavaScript (Versão 1.0b - 10/09) Script desenvolvido por Klonder (Moderador da área de JavaScript do fórum iMasters). Características: JavaScript puro, sem frameworks; Disposição: horizontal; Direção de rolagem: para a esquerda; Loop infinito: SIM; Pausa com mouseover: SIM. Botões de controle: NÃO. Postagem exclusiva em: www.forum.imasters.com.br */ var quantExibida = 5; var pausa = false; //Criando uma variável-controle para saber qual será o primeiro índice da sequência atual. //Varia conforme a sequência em vigor; //Exemplo: Primeira sequência: [0]123; 2ª: [1]234; 3ª: [2]345... var iFirst = 0; //Local das imagens e caminho dos links: var linha = new Array(); linha[0] = "

"; linha[1] = "

"; linha[2] = "

"; linha[3] = "

"; linha[4] = "

"; linha[5] = "

"; linha[6] = "

"; linha[7] = "

"; linha[8] = "

"; linha[9] = "

"; linha[10] = "

"; linha[11] = "

"; linha[12] = "

"; linha[13] = "

"; linha[14] = "

"; linha[15] = "

"; linha[16] = "

"; linha[17] = "

"; function FormarDiv(){ var iAtual = 0; var Marquee = document.getElementById("motionMarquee"); var extra = 0; var DivFormada = ""; /* Fórmula para saber qual o índice atual (iAtual): iAtual = iFirst + i (Primeiro índice + soma do ciclo); Caso essa soma seja maior do que o valor máximo dos índices, irei adicionar um índice . Exemplo: Se a sequência atual iniciasse com iFirst = 6, então: [6] 7 <0>; Se iFirst fosse 7, teríamos: [7] <0> <1>; Como a variável está dentro da função, sempre irá começar por 0 (zero): */ //Zerando o valor do primeiro índice, caso exceda o valor máximo de índices: if (iFirst >= linha.length) { iFirst = 0; } //Criando a sequências de índices que serão exibidos no DIV atual: for (var i=0; i= linha.length) { // irá assumindo, em sequência, os valores: <0>, <1>, <2>, <3>... iAtual = extra; extra++; } else { iAtual = iFirst + i; } //Criando os objetos da div atual em sequência: DivFormada += linha[iAtual]; } iFirst++; //Acrescentando 1 ao iFirst para reutilizá-lo na próxima sequência: Marquee.innerHTML = DivFormada; //Jogando a sequência atual dentro do DIV; pausa = true; //Criando uma pausa; Se "Pausa != true" -----> "stop"; moveMarquee(); //Chamando a função moveMarquee, para mover o div que acabou de ser criado. } //Criando uma variável para controlar a posição do

: var pos = 0; //Função responsável pela animação do Marquee: function moveMarquee(){ //Localizando os objetos: var Caixa = document.getElementById("baseMarquee"); var Marquee = document.getElementById("motionMarquee"); var tempoPausa = 0; pos+=2; //Se pos assumir o valor = 100, iremos zerá-lo e chamar a função FormarDIV() //para criar outro grupo de divs: Este valor deve ser o tamanho disponibilizado para cada imagem if (pos>=150) { pos = 0; FormarDiv(); //Caso contrário, prosseguiremos com chamadas à função moveMarquee(); } else { Marquee.style.marginLeft = ((-1)*pos)+"px"; if (pausa == false) { tempoPausa = setTimeout("moveMarquee()",200); } else { tempoPausa = setTimeout("moveMarquee()",2000); pausa = false; } } } window.onload = FormarDiv;