javascript - Imagenes rotativas

TickTack · 5 Noviembre 2018, 14:24 PM

Hola,

en este código de javascript pueden dejar rotar en circulo cualquier cantidad de diferentes imagenes.

Con ello pueden cambiar en el comienzo del script no solamente las imágenes y sus pertenecientes links, sino también la velocidad, la posición, la dirección y el radio del circulo.

En nuestro ejemplo rotan cuatro imágenes arbitrarias.

Para ajustar las imágenes, por favor cambien el vector imagenes. Allí agreguen los links y las imágenes según el siguiente ejemplo:

URL del link => URL de la imagen

Osea por ejemplo así:

http://4.bp.blogspot.com => http://4.bp.blogspot.com/-y0zqfg-NQvg/UD0fMKA4rFI/AAAAAAAAAC8/6gn1s0JmCCc/s320/1418009890.png

Código:

Código [Seleccionar]


<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de javascript</title>
  <meta charset="UTF-8">
</head>
<body>
<!-- Presentado por javascripts-gratis.de -->
<script type='text/javascript'>
<!--
// Ajustar tamaño y posición
var zx,zy;
var mediox = 100;
var medioy = 50;
var radio = 100;
var speed  = 2; // 1-10... + oder - für Richtung
var imagenes_i = 0;
var imagenes = new Array();
var alpha = new Array();

// Ajustar las imagenes aqui
// Sintaxis: Link-URL => URL de la imagen
imagenes[imagenes_i++] = 'http://4.bp.blogspot.com => http://4.bp.blogspot.com/-y0zqfg-NQvg/UD0fMKA4rFI/AAAAAAAAAC8/6gn1s0JmCCc/s320/1418009890.png';
imagenes[imagenes_i++] = 'https://2.bp.blogspot.com => https://2.bp.blogspot.com/-d10rOGrZ7Hs/Tz5GT465rhI/AAAAAAAAHPs/pea6FI2bxKk/s200/juego+los+animales+de+granja.jpg';
imagenes[imagenes_i++] = 'https://pbs.twimg.com => https://pbs.twimg.com/profile_images/611270112843165697/sFT_vQcc_400x400.jpg';
imagenes[imagenes_i++] = 'http://www.misjuegos.com.mx => http://www.misjuegos.com.mx/wp-content/uploads/2009/05/8.png';


// A partir de aqui no cambiar mas nada
function initRotat() {
	alpha_tmp = 0;
	speed = speed / 1000;
	for ( var i = 0; i < imagenes.length; i++)
	{
		alpha[i] = 6.28 / (imagenes.length) + alpha_tmp; // 0,1.6,3.2,4.8
		var tmp = imagenes[i].split(" => ");
		document.write('<div id="icon'+i+'" style="position:absolute;"><a href="'+tmp[0]+'"><img src="'+tmp[1]+'" alt="" border="0" /></a></div>');
		alpha_tmp = alpha[i];
	}
}
function pol_zu_kart(mx,my,radio,alp)
{
	zx = mx + (radio * Math.sin(alp));
	zy = my + (radio * Math.cos(alp));
}

function seguirgirando()
{
	for (var i = 0; i < imagenes.length; i++)
	{
		alpha[i]+=speed;
		if (speed>0)
		{
			if(alpha[i]>6.28) alpha[i]-=6.28;
		}
		else
		{
			if(alpha[i]<0) alpha[i]+=6.28;
		}
		pol_zu_kart(mediox,medioy,radio,alpha[i]);

		document.getElementById('icon'+i).style.top=zy+'px';
		document.getElementById('icon'+i).style.left=zx+'px';
	}
}
initRotat();
//-->
</script>
<script type="text/javascript">status = window.setInterval("seguirgirando()",10);</script>
<!-- Presentado por javascripts-gratis.de -->
</body>
</html>

Página web: https://drive.google.com/open?id=17HUcaDaOeXHouydO9E0b4ur-gmrt0SNc

Saludos

Test Foro de elhacker.net SMF 2.1

javascript - Imagenes rotativas

TickTack