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:
<!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... + o - para la dirección
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