elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Estamos en la red social de Mastodon


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  javascript - Imagenes rotativas
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: javascript - Imagenes rotativas  (Leído 1,303 veces)
TickTack


Desconectado Desconectado

Mensajes: 434


CipherX


Ver Perfil
javascript - Imagenes rotativas
« en: 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:
<!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


En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Ayuda con Imagenes Dinamicas con javascript
Desarrollo Web
rubents2 1 3,596 Último mensaje 28 Mayo 2010, 15:36 pm
por Red Mx
Banner de imagenes en javascript
Desarrollo Web
nikko88 0 1,911 Último mensaje 20 Julio 2012, 14:19 pm
por nikko88
{Ayuda} Cargar imágenes javascript
Desarrollo Web
sebah97 6 4,021 Último mensaje 1 Mayo 2013, 12:32 pm
por #!drvy
javascript canvas precarga de imagenes
Desarrollo Web
patilanz 0 1,824 Último mensaje 8 Abril 2014, 23:35 pm
por patilanz
javascript - Imagenes casuales
Desarrollo Web
TickTack 0 1,289 Último mensaje 19 Febrero 2019, 12:31 pm
por TickTack
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines