Banner con imágenes efecto slidein.

En categoría: Banners Rotativos

Este ejemplo JavaScript nos permite insertar un banner con imágenes que enlazan a las direcciones URL que definamos para cada una. La particularidad de este Script es que produce un efecto SlideIn sobre las imágenes del banner. Podemos configurar la dirección del efecto Slidein para que las imágenes se muestren de izquierda a derecha o de derecha a izquierda. También podemos configurar la velocidad de movimiento de las imágenes, el color de fondo del banner, ancho y alto del mismo y la alineación dentro de la página. Podemos insertar tantas imágenes como queramos.

| Descripción del ejemplo JavaScript

Información relativa al Script

Compatible con: Internet Explorer

Tamaño del Script: 6KB

Probar el Script

Temas relacionados a este Script

Ejemplo JavaScript para insertar un banner con imágenes 
y aplicar un efecto Slidein en la dirección que definamos.

Código fuente del script:

<STYLE type="text/css">
	img {margin-top:4px;}
</STYLE>

// Imágenes que se cargan en el banner
var bannerSlide = new Array()
var finalslide = " " // No editar

bannerSlide[0] = '<A href=""><img width="90" height="67" src="img01.jpg"></A>'
bannerSlide[1] = '<A href=""><img width="90" height="67" src="img02.jpg"></A>'
bannerSlide[2] = '<A href=""><img width="90" height="67" src="img03.jpg"></A>'
bannerSlide[3] = '<A href=""><img width="90" height="67" src="img04.jpg"></A>'
bannerSlide[4] = '<A href=""><img width="90" height="67" src="img05.jpg"></A>'

// Ejemplo para agregar una imagen más al banner
// bannerSlide[5] = '<A href=""><img width="90" height="68" src="img05.jpg"></A>'

/* ************* NO EDITAR ******************* */
var velocidadTemp = velocidad
bannerSlide = '<nobr>'+bannerSlide.join(espacioImagen)+'</nobr>'
var iedom = document.all||document.getElementById
if (direccion == 'left') {
	widthCapa = -9000
	}
else {
	widthCapa = 9000
	}
if (iedom)
document.write('<SPAN id="temp" style="visibility:hidden;position:absolute;top:-100px;'+
direccion+':'+widthCapa+'px">'+bannerSlide+'</SPAN>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide = document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2 = document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML = bannerSlide
actualwidth = document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
	if (direccion == 'left') {
	cross_slide2.style.left = actualwidth+espacioFin+"px"
	}
	else {
	cross_slide2.style.right = actualwidth+espacioFin+"px"
	}
}
else if (document.layers){
ns_slide = document.ns_slidemenu.document.ns_slidemenu2
ns_slide2 = document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(bannerSlide)
ns_slide.document.close()
actualwidth = ns_slide.document.width
	if (direccion == 'left') {
	ns_slide2.left = actualwidth+espacioFin
	}
	else {
	ns_slide2.right = actualwidth+espacioFin
	}
ns_slide2.document.write(bannerSlide)
ns_slide2.document.close()
}

lefttime = setInterval("slideleft()",70)
}
window.onload=fillup

function slideleft() {
objeto = 'cross_slide.style.'+direccion
objeto2 = 'cross_slide2.style.'+direccion
if (iedom) {
if (parseInt(eval(objeto)) > (actualwidth*(-1)+8))
	if (direccion == 'left') {
	cross_slide.style.left = parseInt(cross_slide.style.left)-velocidadTemp+"px";
	}
	else {
	cross_slide.style.right = parseInt(cross_slide.style.right)-velocidadTemp+"px";
	}

else
	if (direccion == 'left') {
	cross_slide.style.left = parseInt(cross_slide2.style.left)+actualwidth+espacioFin+"px";
	}
	else {
	cross_slide.style.right = parseInt(cross_slide2.style.right)+actualwidth+espacioFin+"px";
	}

if (parseInt(eval(objeto2)) > (actualwidth*(-1)+8))
	if (direccion == 'left') {
	cross_slide2.style.left = parseInt(cross_slide2.style.left)-velocidadTemp+"px";
	}
	else {
	cross_slide2.style.right = parseInt(cross_slide2.style.right)-velocidadTemp+"px";
	}

else
	if (direccion == 'left') {
	cross_slide2.style.left = parseInt(cross_slide.style.left)+actualwidth+espacioFin+"px";
	}
	else {
	cross_slide2.style.right = parseInt(cross_slide.style.right)+actualwidth+espacioFin+"px";
	}

}

else if (document.layers){
nsobjeto = 'ns_slide.'+direccion
nsobjeto2 = 'ns_slide.'+direccion
if (nsobjeto > (actualwidth*(-1)+8))
	if (direccion == 'left') {
	ns_slide.left -= velocidadTemp
	}
	else {
	ns_slide.right -= velocidadTemp
	}

else
	if (direccion == 'left') {
	ns_slide.left = ns_slide2.left+actualwidth+espacioFin
	}
	else {
	ns_slide.right = ns_slide2.right+actualwidth+espacioFin
	}

if (nsobjeto2 > (actualwidth*(-1)+8))
	if (direccion == 'left') {
	ns_slide2.left -= velocidadTemp
	}
	else {
	ns_slide2.right -= velocidadTemp
	}

else
	if (direccion == 'left') {
	ns_slide2.left = ns_slide.left+actualwidth+espacioFin
	}
	else {
	ns_slide2.right = ns_slide.right+actualwidth+espacioFin
	}
}
}

if (iedom || document.layers){
with (document){
document.write('<TABLE border=0 cellspacing=0 cellpadding=0 align='+alineaTabla+'><TR><TD>')
if (iedom){
write('<DIV style="position:relative;width:'+anchoBanner+';height:'+altoBanner+';overflow:hidden">')
write('<DIV style="position:absolute;width:'+anchoBanner+';height:'+altoBanner+';background-color:'+colorBanner+'" onMouseover="velocidadTemp=0" onMouseout="velocidadTemp=velocidad">')
write('<DIV id=test2 style="position:absolute;'+direccion+':0px;top:0px"></DIV>')
write('<DIV id=test3 style="position:absolute;'+direccion+':-1000px;top:0px"></DIV>')
write('</DIV></DIV>')
}
else if (document.layers){
write('<ILAYER width='+anchoBanner+' height='+
altoBanner+' name="ns_slidemenu" bgColor='+colorBanner+'>')
write('<LAYER name="ns_slidemenu2" '+
direccion+'=0 top=0 onMouseover="velocidadTemp=0" onMouseout="velocidadTemp=velocidad"></LAYER>')
write('<LAYER name="ns_slidemenu3" '+
direccion+'=0 top=0 onMouseover="velocidadTemp=0" onMouseout="velocidadTemp=velocidad"></LAYER>')
write('</ILAYER>')
}
document.write('</TD></TR></TABLE>')
}
}

</script>

</HEAD>

<BODY>

Este banner muestra las imágenes definidas por nosotros<br>
y produce un Slidein según la dirección definida (derecha/izquierda o izquierda/derecha).<br>
Las imágenes cargadas en el banner se repiten una vez que es mostrada la última.<br>
Cada imagen tiene su propia dirección URL de enlace hacia otra página o sitio.

</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: Banner con imágenes efecto slidein

Roxana de Argentina | Enviado: Septiembre 3, 2008

Admin | Enviado: Marzo 18, 2008

soulfire de spain | Enviado: Marzo 18, 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.