Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

regina

Mostrar logos alternando a ordem de exibição

Recommended Posts

Olá Pessoal! Tudo bem?Estou desenvolvendo um projeto simples, mas que me apareceu uma dúvida para evitar aborrecimentos ao cliente.Ele está organizando um evento e conseguiu alguns patrocínios só que ele não quer colocar uma ordem para os patrocinadores. No layout que fizemos a coluna de apoiadores/patrocinadores está à direita e na vertical, mostrando em cada linha um patrocinador, então eu pensei em alternar a posição destes patrocinadores a cada atualização da página, em javascript mesmo.Será que é possível, uma vez que todas as imagens(logos) já são mostradas de uma só vez?Desde já sou grata.Regina

Compartilhar este post


Link para o post
Compartilhar em outros sites

Script:

/* * author Fleury, Diego*/function randomizeImages(elementGroupId) {	var srcImages = document.getElementById(elementGroupId).getElementsByTagName("img");	var total = srcImages.length;	var cloneImages = new Array();	var newOrder = new Array();		for (var i = 0; i < total; i++) {		cloneImages[i] = srcImages[i].cloneNode(true);	}		document.getElementById(elementGroupId).innerHTML = "";		var copyed = 0; 	while (copyed < total) {		var rand = Math.round(Math.random()*(cloneImages.length-1));		if (cloneImages[rand] != null) {			newOrder.push(cloneImages[rand]);			cloneImages[rand] = null;			copyed++;		}	}		for (var i = 0; i < newOrder.length; i++) {		document.getElementById(elementGroupId).appendChild(newOrder[i]);	}}
Uso:

Inserir no onload do body:

<body onload="randomizeImages('logos');">
Local das imagens:
<div id="logos">			<img src="1.jpg" />			<img src="sad.jpg" />			<img src="kkk.jpg" />			<img src="teste.jpg" />			<img src="hu.jpg" />		</div>
O uso é simples, você coloca as imagens em algum elemento tipo container como uma div, atribui a este elemento um id e indica este id na chamada da função.

 

abraços

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.