como logro este efecto

geograf_art · #1 (**permalink**) 01/05/2005, 21:46

Hola,me gustaria poner este efecto en mi web, consiste en que un grupo de fotos se mueve de un lado a otro de forma horizontal , ese efecto me gustaria en mi web pero no se como lograrlo aca les dejo la direccion de la pagina para que lo vean y tengan un idea de lo que quiero hacer de antemano gracias por las respuestas

.

www.cazzanigaecazzaniga.it

Shantic · #2 (**permalink**) 01/05/2005, 23:31

en firefox no anda, pero en IE si lo vi, tal vez te ayude la opcion <MARQUEE> algo asi como (toime pretado este codigo :P)

Código:

<marquee scrollamount="4" direction="left" onMouseover="this.scrollAmount=0" onMouseout="this.scrollAmount=4"><a href="link path" target="_blank"><img width="insert image width here" heigth="insert image heigth here" src="image path"></a></marquee>

Suerte

caricatos · #3 (**permalink**) 02/05/2005, 01:07

Hola a todos:

En la página de scripts de tunait (¡Hola

!) hay algo: http://javascript.tunait.com/javascr...asp?s=carousel

Saludos

geograf_art · #4 (**permalink**) 02/05/2005, 10:23

HOla, probe el codigo shantic, me aparece la marquesina pero no se visualiza las fotos en el src="D:\josue\borrar\ejem.jpeg", esta es la ruta de la foto, pero solo sale en blanco la marquisina desplazandose con una equis en rojo en la parte superior izquierda como si no pudiera jalar la foto,pero la direccion esta bien agregada, algo falta a tu codigo o que habre hecho mal, CAricatos el link q me haz dado justo hay algo similar al que quiero pero al querer ver el codigo no aparece la pagina, yo recien comienzo en esto del script no se si me pudieses alcanzar el codigo o una pagina similar te lo agradeceria un monton. de antemano gracias a sus respuestas

seoista · #5 (**permalink**) 02/05/2005, 23:26

Hola geograf_art

>> AQUÍ << tienes el código.

Saludos

geograf_art · #6 (**permalink**) 03/05/2005, 10:18

Hola seoista, he pinchado en el link que haz puesto pero me abre una venta en blanco

no carga esa direccion, me podrias volver a enviar el codigo o de otra pagina por favor, te lo agradecir un monton

, hasta la vista

seoista · #7 (**permalink**) 03/05/2005, 22:41

En la ventana en blanco que abre, dale a actualizar y te saldrá el código.

A mí me funciona bien

.

Bueno..., ahí va:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Carousel de im&aacute;genes (marquesina horizontal)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
/*****************************************************************************
Carousel de imágenes (marquesina horizontal). Script creado por Tunait! (18/8/2003) modificado el 25/12/2003.
Si quieres usar este script en tu sitio eres libre de hacerlo con la condición de que permanezcan intactas estas líneas, osea, los créditos.
No autorizo a publicar y ofrecer el código en sitios de script sin previa autorización
Si quieres publicarlo, por favor, contacta conmigo.
http://javascript.tunait.com/
[email protected] 
******************************************************************************/
var ancho = 300  // especifica la anchura a mostrar
var alto = 118 // especifica la altura a mostrar (alto de las imágenes)
var velo = 10 // velocidad 
var dis = 2 //cantidad de pixels que desplaza por movimiento

var imagenes = new Array()
imagenes[0] = new Image()
imagenes[0].src = "imagenes/14.gif" // ruta o nombre de imagen 
imagenes[0].a = "http://www.yahoo.es/" // link de la imagen
imagenes[0].target = "_blank" //target del link
imagenes[1] = new Image()
imagenes[1].src = "imagenes/19.gif"
imagenes[1].a = "http://www.tunait.com"
imagenes[1].target = "_self"
imagenes[2] = new Image()
imagenes[2].src = "imagenes/9.gif"
imagenes[2].a = ""
imagenes[2].target = "_blank"
imagenes[3] = new Image()
imagenes[3].src = "imagenes/6.gif"
imagenes[3].a = ""
imagenes[3].target = "_blank"
imagenes[4] = new Image()
imagenes[4].src = "imagenes/7.gif"
imagenes[4].a = ""
imagenes[4].target = "_blank"
imagenes[5] = new Image() 
imagenes[5].src = "imagenes/18.gif"
imagenes[5].a = ""
imagenes[5].target = "_blank"
imagenes[6] = new Image()
imagenes[6].src = "imagenes/15.gif"
imagenes[6].a = ""
imagenes[6].target = "_blank"

var vel = velo
pasos = 4
var tot = 0
var tam =0;
var pos,pos2,tam2 =0;
function escribe(){
document.write ('<div id ="fuera" style="position:relative; width:' + ancho + 'px; height:' + alto + 'px;overflow:hidden">');
document.write ('<span id="imas" style="position:absolute; width:' + tam + 'px;height:' + alto + 'px; left = -' + tam + 'px;"  onmouseover="if(detienee == 0){detienee = 1}" onmouseout="clearTimeout(tiempo);detienee=0;atras = false;vel=velo;mueve()">');
for (m=0;m<imagenes.length;m++){
	if(imagenes[m].a != ""){
		document.write('<a href="' + imagenes[m].a + '" target="' + imagenes[m].target + '">')
		}
	document.write ('<img border="0"  src ="' + imagenes[m].src + '" id="ima' + m + '" name="ima' + m + '"  onload="tot++;">');
	if(imagenes[m].a != ""){document.write ('</a>')}
	}
document.write ('</span>');
document.write ('<span id="imas2" style="position:absolute; width:' + tam + 'px;height:' + alto + ';left=0;"  onmouseover="if(detienee == 0){detienee = 1}" onmouseout="clearTimeout(tiempo);detienee=0;atras = false;vel=velo;mueve()">');
for (m=0;m<imagenes.length;m++){
	if(imagenes[m].a != ""){
		document.write('<a href="' + imagenes[m].a + '" target="' + imagenes[m].target + '">')
		}
	document.write ('<img border="0" src ="' + imagenes[m].src + '" id="imaa' + m + '" name="imaa' + m + '" onload="tot++;">');
	if(imagenes[m].a != ""){document.write ('</a>')}
	}
document.write ('</span>');
document.write ('</div>');
}
var detienee = 0,posb,pos2b;
function mueve(){
pos = document.getElementById('imas').style.left;
pos2 = document.getElementById('imas2').style.left;
pos = pos.replace(/px/,"");
pos = pos.replace(/pt/,"");
pos = new Number(pos);
pos2 = pos2.replace(/px/,"");
pos2 = pos2.replace(/pt/,"");
pos2 = new Number(pos2);
if(detienee == 1){
	posb = pos;
	pos2b = pos2;
	}
if(atras == true){
pos-=dis;
pos2 -=dis;
}
else{
pos += dis;
pos2 += dis;
}
if(pos2 > (ancho + dis)){
	if(detienee == 0){
		document.getElementById('imas2').style.left = pos  - (tam + dis);
		pos2 = document.getElementById('imas2').style.left;
		}
	else{
		document.getElementById('imas').style.left = pos 
		}
	}
else{
	document.getElementById('imas').style.left = pos 
	}

if(pos > (ancho + dis)){
	if(detienee == 0){
		document.getElementById('imas').style.left = pos2 - (tam + dis);
		pos = document.getElementById('imas').style.left;
		}
	else{
		document.getElementById('imas2').style.left = pos2;
		}
	}
else{
	document.getElementById('imas2').style.left = pos2
	}
if(detienee > 0){
	if(detienee == pasos){
		vel = velo;
		atras = true;
		detienee--;
		tiempo = setTimeout('mueve()',vel);
		}
	else{
		if(atras == true){
			if(detienee>(pasos/2))
				{detienee--}
			else{
			vel = velo;
			clearTimeout(tiempo)
			}
			}
	else{
		detienee++
		}
	if(detienee > (pasos/2) && atras == false){vel +=10}
		if(detienee < (pasos/2)){vel +=10}
		tiempo = setTimeout('mueve()',vel)
		}
	}
else{
tiempo = setTimeout('mueve()',vel)
	}
if(atras == true){
		if (pos == posb){
			clearTimeout(tiempo);
			atras = false;
			}
		}
}
var tiempo;
var atras = false, ini;
function inicio(){
if(tot == (imagenes.length * 2)){clearTimeout(ini);reDimCapas();mueve()}
else{ini=setTimeout('inicio()',500)}
}
function reDimCapas(){
for(m=0;m<imagenes.length;m++){
	tam +=document.getElementById('ima'+m).width
	document.getElementById('imas').style.left = (-tam +10);
	document.getElementById('imas').style.width = tam ;
	document.getElementById('imas2').style.width = tam;
	}
}

</script>
</head>

<body onload="inicio();" >
<table width="51%" border="0" align="center">
  <tr>
    <td align="center">
<script>escribe();</script>
    </td>
  </tr>
</table>

<p> 
</p>
</body>
</html>

Saludos y suerte

geograf_art · #8 (**permalink**) 17/05/2005, 09:31

muchas graciasa todos

neowebmaster · #9 (**permalink**) 17/05/2005, 09:36

Anda pos q efecto tan chulo... no se mavia ocurrio, jatetu!! La de cosas que aprende uno por aqui siempre... ^_^