Mueve y desplaza un Banner (imagen) sobre otro.

En categoría: Banners Rotativos

Este ejemplo Javascript crea un sistema de banner rotativo el cual inserta una imagen que luego es desplazada por otra. Muy útil para páginas en las cuales tengamos dos publicidades o mensajes para mostrar en la cabecera del sitio.

| Descripción del ejemplo JavaScript

Información relativa al Script

Compatible con: Internet Explorer

Tamaño del Script: 2KB

Probar el Script

Comentarios: En Firefox se presentan algunos problemas con el área que se define como enlace, aunque es posible utilizarlo sin problemas de visualización y efecto.

Temas relacionados a este Script

Mover y desplazar un Banner de imagen sobre otro.

Código fuente del script:

var tiempoBanner, velocidad, wait, banner1, banner2, bannerIndex, imagenURL;

function iniBanner() {
	tiempoBanner = 3; // Definimos el tiempo que será mostrado cada banner.
	velocidad = 5; // Definimos la velocidad de cambio de un banner a otro.
	/* Definimos si el primer banner que se carga al comienzo se muestra los 
	primeros segundos o automáticamente se carga el siguiente Banner */
	wait = true; // posibles valores true | false

banner1 = document.getElementById("banner1");
	banner2 = document.getElementById("banner2");

banner1.style.left = 0;
	banner2.style.left = 500;

bannerIndex = 1;
	
	// URL de la imagen que se carga en el banner
	imagenURL = new Array("banner1.jpg", "banner2.jpg");
	
	// URL donde apunta el enlace de cada banner.
	bannerURLs = new Array("http://URLdelbanner1","http://URLdelbanner2");
}// Fin Función iniBanner()

// Creamos la función que mueve el banner
function moverBanner(){
	
	if(!wait){
		
	banner1.style.left = parseInt(banner1.style.left) -  (velocidad * 5);
	banner2.style.left = parseInt(banner2.style.left) - (velocidad * 5);
		
		
		if(parseInt(banner1.style.left) <= -500){
		banner1.style.left = 500;
		bannerIndex = (bannerIndex < (imagenURL.length - 1)) ? ++bannerIndex :0;
		banner1.src = imagenURL[bannerIndex];
		URL1.href = bannerURLs[bannerIndex];
		wait = true;
		}
		
		if(parseInt(banner2.style.left) <= -500){
		banner2.style.left = 500;
		bannerIndex = (bannerIndex < (imagenURL.length - 1)) ? ++bannerIndex :0;
		banner2.src = imagenURL[bannerIndex];
		URL2.href = bannerURLs[bannerIndex];
		wait = true;
		}

setTimeout("moverBanner()",100);		
	} else {
		wait = false;
		setTimeout("moverBanner()", tiempoBanner * 1000);
	}
}// Fin Función moverBanner()

</SCRIPT>

#agregarBanner { 
position: relative; width: 500px; height: 70 px; 
clip: rect(0px, 500px, 0px, 70px); overflow: hidden; 
}
#banner1 { 
position: relative; width: 480px; height: 60px; left: 0; top: 5px; 
}
#banner2 { 
position: relative; width: 480px; height: 60px; left: 500px; top: -55px; top:-58px; 
}

</STYLE>

</HEAD>

</DIV>
En 3 segundos se cargará un banner diferente.<BR>
El segundo Banner desplazará al primero de izquierda a derecha.
	</DIV>

</BODY>
</HTML>

	Temas relacionados a este Script:
	Banner Rotativo de Imagen Banner Rotativo de Texto Banner de texto siempre visible Desplazar y mover Banner de imagen Abrir ventana con Banner propio Banner con imágenes efecto SlideIn Banner / Capa flotante sensible al Scroll de la ventana

Comentarios Recibidos sobre: Mueve Desplaza un Banner sobre otro

Admin | Enviado: Marzo 18, 2008

adrian garcia de spain | Enviado: Marzo 16, 2008

Agradecemos todos los comentarios. Gracias por ayudarnos a mejorar el sitio.
Importante: Los comentarios están para ampliar el artículo propuesto en esta página, proponer o responder alguna consulta de otro visitante. En ningún caso nos hacemos responsables del contenido publicado en los comentarios. En el caso que formules una pregunta y ésta no sea respondida, puedes solicitarnos ayuda desde el formulario de ayuda aunque no te aseguramos una respuesta inmediata.