Como criar uma marca de imagem contínua em JavaScript

este Javascript cria uma marca de rolagem na qual a área de imagens onde as imagens se movem horizontalmente pela área de exibição. À medida que cada imagem desaparece em um lado da área de exibição, ela é lida no início da série de imagens. Isso cria uma rolagem contínua de imagens na marca de seleção que faz um loop - desde que você tenha imagens suficientes para preencher a largura da área de exibição da marca de seleção.

Este script tem algumas limitações, no entanto:

• As imagens são exibidas no mesmo tamanho (largura e altura). Se as imagens não forem fisicamente do mesmo tamanho, serão todas redimensionadas. Isso pode resultar em baixa qualidade da imagem; portanto, é melhor dimensionar consistentemente as imagens de origem.
• A altura das imagens deve corresponder à altura definida para a marca de seleção; caso contrário, as imagens serão redimensionadas com o mesmo potencial para imagens ruins mencionadas acima.
• A largura da imagem multiplicada pelo número de imagens deve ser maior que a largura da marca de seleção. A solução mais fácil para isso, se houver imagens insuficientes, é apenas repetir as imagens na matriz para preencher a lacuna.
  instagram viewer
• A única interação que esse script oferece é parar o deslocamento quando o mouse é movido sobre a marca de seleção e retomar quando o mouse se afasta da imagem. Mais tarde, descrevemos uma modificação que pode ser feita para converter todas as imagens em links.
• Se você tiver várias marcas de seleção em uma página, todas elas serão executadas na mesma velocidade; portanto, passar o mouse sobre qualquer uma delas fará com que todas parem de se mover.
• Você precisa de suas próprias imagens. Os exemplos não fazem parte desse script.

O primeiro, copie o seguinte JavaScript e salve-o como marquee.js.

Este código contém duas matrizes de imagem (para as duas marcas de seleção na página de exemplo), bem como dois novos objetos mq que contêm as informações a serem exibidas nessas duas marcas de marca.

Você pode excluir um desses objetos e alterar o outro para exibir uma marca contínua em sua página ou repetir essas instruções para adicionar ainda mais marcas.

A função mqRotate deve ser chamada passando mqr depois que as marcas de seleção são definidas, uma vez que manipularão as rotações.

var
mqAry1 = ['graphics / img0.gif', 'graphics / img1.gif', 'graphics / img2.gif', '
graphics / img3.gif ',' graphics / img4.gif ',' graphics / img5.gif ',' graphics /
img6.gif ',' graphics / img7.gif ',' graphics / img8.gif ',' graphics / img9.gif ',
'graphics / img10.gif', 'graphics / img11.gif', 'graphics / img12.gif', '
graphics / img13.gif ',' graphics / img14.gif '];

var
mqAry2 = ['graphics / img5.gif', 'graphics / img6.gif', 'graphics / img7.gif', '
graphics / img8.gif ',' graphics / img9.gif ',' graphics / img10.gif ',' graphics /
img11.gif ',' graphics / img12.gif ',' graphics / img13.gif ',' graphics / img14.
gif ',' graphics / img0.gif ',' graphics / img1.gif ',' graphics / img2.gif ','
graphics / img3.gif ',' graphics / img4.gif '];

função start () {
novo mq ('m1', mqAry1,60);
new mq ('m2', mqAry2,60); // repita para quantos campos de combustível forem necessários
mqRotate (mqr); // deve vir por último
}
window.onload = iniciar;

// Letreiro de imagem contínua
// copyright 24 de julho de 2008 por Stephen Chapman
// http://javascript.about.com
// é concedida permissão para usar esse Javascript em sua página da web
// desde que todo o código abaixo neste script (incluindo estes
// comments) é usado sem nenhuma alteração

var
mqr = []; função
mq (id, ário, wid) {this.mqo = document.getElementById (id); var heit =
this.mqo.style.height; this.mqo.onmouseout = function ()
{mqRotate (mqr);}; this.mqo.onmouseover = function ()
{clearTimeout (mqr [0] .TO);}; this.mqo.ary = []; var maxw = comprimento ário;
para (var
i = 0; ithis.mqo.ary [i] .src = ary [i]; this.mqo.ary [i] .style.position =
'absoluto'; this.mqo.ary [i] .style.left = (wid * i) + 'px';
this.mqo.ary [i] .style.width = wid + 'px'; this.mqo.ary [i] .style.height =
heit; this.mqo.appendChild (this.mqo.ary [i]);} mqr.push (this.mqo);}
função mqRotate (mqr) {if (! mqr) return; para (var j = mqr.length - 1; j
> -1; j--) {maxa = mqr [j] .ary.length; para (var i = 0; imqr [j] .ary [i] .style; x.left = (parseInt (x.left, 10) -1) + 'px';} var y =
mqr [j] .ary [0] .style; if (parseInt (y.left, 10) + parseInt (y.width, 10) <0)
{var z = mqr [j] .ary.shift (); z.style.left = (parseInt (z.style.left) +
parseInt (z.style.width) * maxa) + 'px'; mqr [j] .ary.push (z);}}
mqr [0] .TO = setTimeout ('mqRotate (mqr)', 10);}

Em seguida, adicione o seguinte código na seção principal da sua página:

Precisamos adicionar um comando de folha de estilo para definir a aparência de cada uma das nossas tendas.

Aqui está o código que usamos para os da página de exemplo:

.marquee {posição: relativa;
estouro: oculto;
largura: 500 px;
altura: 60px;
borda: preto sólido 1px;
}

Você pode alterar qualquer uma dessas propriedades para sua marca de seleção; no entanto, deve permanecer posição: relativa.

Você pode colocá-lo em sua folha de estilos externa, se tiver uma, ou anexá-la entre tags no cabeçalho da sua página.

O próximo passo é definir uma div em sua página da web onde você colocará a marca de imagens.

A primeira das marcas de exemplo usou este código:

A classe associa isso ao código da folha de estilo, enquanto o ID é o que usaremos na nova chamada mq () para anexar a marca de imagens.

A última coisa a fazer para juntar tudo isso é garantir que seu código para adicionar o objeto mq no seu JavaScript após o carregamento da página contenha os valores corretos.

Aqui está uma das instruções de exemplo:

novo mq ('m1', mqAry1,60);

• O m1 é o ID da nossa tag div que exibirá a marca de seleção.
• mqAry1 é uma referência a uma matriz de imagens que serão exibidas na marca de seleção.
• O valor final 60 é a largura de nossas imagens (as imagens rolam da direita para a esquerda e, portanto, a altura é a mesma que definimos na folha de estilos).

Para adicionar marcas de seleção adicionais, apenas configuramos matrizes de imagens adicionais, divs adicionais em nosso HTML, possivelmente configuramos classes adicionais para estilizar as marcas de forma diferente e adicionar tantas novas instruções mq () quanto tendas. Só precisamos garantir que a chamada mqRotate () os siga para operar as marcas de seleção para nós.

Há apenas duas alterações que você precisa fazer para transformar as imagens na marca de seleção em links.

Primeiro, altere sua matriz de imagens de uma matriz de imagens para uma matriz de matrizes onde cada uma das matrizes internas consiste em uma imagem na posição 0 e o endereço do link na posição 1.

var mqAry1 = [
['graphics / img0.gif', 'blcmarquee1.htm'],
['graphics / img1.gif', 'blclockm1.htm'], ...
['graphics / img14.gif', 'bltypewriter.htm']];

A segunda coisa a fazer é substituir o seguinte pela parte principal do script:

// Letreiro de imagem contínua com links
// copyright 21 de setembro de 2008 por Stephen Chapman
// http://javascript.about.com
// é concedida permissão para usar esse Javascript em sua página da web
// desde que todo o código abaixo neste script (incluindo estes
// comments) é usado sem nenhuma alteração
var mqr = []; função mq (id, ário, wid) {this.mqo = document.getElementById (id); var heit = this.mqo.style.height; this.mqo.onmouseout = function () {mqRotate (mqr);}; this.mqo.onmouseover = function () {clearTimeout (mqr [0] .TO);}; this.mqo.ary = []; var maxw = comprimento ário; para (var i = 0; i -1; j--) {maxa = mqr [j] .ary.length; para (var i = 0; i

O restante do que você precisa fazer permanece o mesmo descrito para a versão da marca de seleção sem os links.