Los anuncios que encontrará en esta página provienen todos del programa Adsense de Google, con la garantía que ello supone. Puede curiosear en ellos sin ningún problema y riesgo.

Esta es una selección de mis páginas (pfont.eu). Navega por ellas sin ningún temor. Hay cosas interesantes.

domingo, 6 de marzo de 2011

Carrusel de imágenes

Esta vez os presento un código que permite ir alternando tantas imágenes (banners) como deseemos, asignándole a cada una un enlace.

Puede servir para anuncios, presentación de imagenes, diapositivas, y cuantas aplicaciones consideréis.

El código es bastante sencillo para cualquier iniciado, pero si necesitáis ayuda podéis contactar conmigo.




Este es el código:

<script>
var imagen=new Array();
var enlac=new Array();
imagen[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhCzN3Boz7Y2dIziCzk16t0-lUGCsGF3usIGwXQHRD_ihERigkicJuAvqa1y4XSwP_23TUVDS5VKgn14k35aykv1yJzvibtg0JorhzSAMBGjPlcd656UyJBjeCJDRDxXE5yu438O-mPfN8/s640/plazamayor.jpg";
enlac[0]="https://plazamayorvillarreal.blogspot.com";
imagen[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXC9c911lPTwCCgxuHUS4CNWVWvX0QwZWh3lHbH12tPCxLAcP0WWbzt5o4FRY4HICYTTI2akGj9pi0lgSx1H2liwokuMONCAWRYZi1VkERUYQDvAfkZ-CUNCbW8kHiCwGDFlacrDpYg-UR/";
enlac[1]="https://www.andresroca.com/contacto.html";
imagen[2]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw2_lt8ZFPFt0qm7amszx4_8pdO_Vhjh-O5QLe6nEyhHbXzjrhoemX5zphyphenhyphenqZ6ocfX9vN_Qv3d_ClPtkpUatOMhPK8S-inotlig-FyWN-necPEI123wSS92RO8b0vMko04FXXYKlxEGMO3/s640/anuncio.jpg";
enlac[2]="mailto:pfont.3110@cajarural.com?subject=Inclusion_propaganda_en_Plaza_Mayor_Villarreal";
np=parseInt(Math.random()*imagen.length,10);
function actupag()
{
if (np<imagen.length-1)
 {np++;}
 else
 {np=0;}
document.getElementById('pag').innerHTML='<a href='+enlac[np]+' TARGET="_new" ><img  id="np" src='+imagen[np]+' style="border:0;display:block; margin: auto auto;padding:0px"/></a>';

if (document.getElementById("np").offsetWidth>ancho)
    {
    document.getElementById("np").width=ancho;
    document.getElementById("np").style.width=ancho;
    }

}
setInterval('actupag()', 10000);
</script>
<div id="pag" style="font-size: 9px; height: 70px; text-align: center; width: 100%;">
</div>
<script>
var ancho=document.getElementById('pag').offsetWidth;
actupag();
</script>

Por si no sabléis como poner el código en un blog os lo indico en esta otra página

2 comentarios:

  1. buenas tardes. ¿cómo se podría cambiar el tamaño de las imágenes para colocarlas en pequeño y que fuera estándar para todas? gracias

    ResponderEliminar
    Respuestas
    1. El código cuenta con un div que se ajusta al espacio asignado dentro de la página (100%), pero si lo que quieres es hacerlo más pequeño aun, debes cambiar dicho 100% por la medida en píxeles (Ejemplo 200px) que necesites, deberás in probando.
      ... div id="pag" style="font-size: 9px; height: 70px; text-align: center; width: 100%;"..

      Eliminar

¿Te ha sido útil algo de lo que has visto?, si es así, deja tu comentario, en caso contrario dime que esperabas encontrar, quizá cuando vuelvas ya esté. Gracias.

Ni un ciclista más fallecido en accidente de tráfcio

Añada un gadget a su blog

Casi todo lo que se muestra en este blog es susceptible de ser usado en otras páginas o blogs. Si Ud. necesita saber como implementarlo, siga el enlace de este título.

Si no encontró lo que quería, proponga otra búsqueda.