JavaScript - Imagenes rotativas

Iniciado por Adalher, Octubre 16, 2019, 01:00:39 PM

Tema anterior - Siguiente tema

0 Miembros y 1 Visitante están viendo este tema.

Octubre 16, 2019, 01:00:39 PM Ultima modificación: Octubre 16, 2019, 01:03:03 PM por Adalher
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í:

No tienes permitido ver enlaces. Registrate o Entra a tu cuenta => No tienes permitido ver enlaces. Registrate o Entra a tu cuenta


Código:

Código: javascript

<!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: No tienes permitido ver enlaces. Registrate o Entra a tu cuenta

Saludos
Este es el mayor reproche al pueblo hispanohablante:

Que a pesar de su inteligencia y a pesar de su valentía siempre adoran el poder.