This site uses cookies own and third. If you continue to browse consider to accept the use of cookies. OK More Info.

JavaScript - Imagenes rotativas

  • 0 Replies
  • 1131 Views

0 Members and 1 Guest are viewing this topic.

Offline Adalher

  • *
  • Underc0der
  • Posts: 150
  • Actividad:
    0%
  • Country: 00
  • Reputación -3
    • View Profile

JavaScript - Imagenes rotativas

  • on: October 16, 2019, 01:00:39 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í:

You are not allowed to view links. Register or Login => You are not allowed to view links. Register or Login


Código:

Code: (javascript) You are not allowed to view links. Register or Login
<!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: You are not allowed to view links. Register or Login

Saludos
« Last Edit: October 16, 2019, 01:03:03 pm by Adalher »
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.