Foros del Web » Programando para Internet » Javascript »

Para tunait

Estas en el tema de Para tunait en el foro de Javascript en Foros del Web. Hola tunait. He estado en tu página web javascript.tunait.com y me he descargado los script que tienes en ella colgados (para aprender). El script "Carrousel ...
  #1 (permalink)  
Antiguo 03/01/2004, 16:14
 
Fecha de Ingreso: noviembre-2003
Mensajes: 383
Antigüedad: 20 años, 5 meses
Puntos: 2
Para tunait

Hola tunait.

He estado en tu página web javascript.tunait.com y me he descargado los script que tienes en ella colgados (para aprender).

El script "Carrousel de imagenes" es bastante bueno, e incluso lo he estado buscando y no lo habia encontrado hasta ahora.

Bueno, lo que he hecho ha sido modificarlo intentando simplificarlo lo maximo posible.

Espero que no te molestes por mi osadía.

Las modificaciones más importantes han sido:

1.- Se añade una función para añadir las imagenes al objeto imagenes[x].

2.- Al empezar la función escribe() verifica si el ancho especificado en la variable ancho es mayor que la suma de los anchos de las imagenes. Si es así ajusta la variable al ancho de las imagenes.

3.- La función mueve() la he simplificado.

Aquí tienes el código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Carousel de imá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 = 1700; // especifica la anchura a mostrar
var alto = 118; // especifica la altura a mostrar (alto de las imágenes)
var velo = 10; // velocidad
var dis = 1; //cantidad de pixels que desplaza por movimiento
var tam =0;
var Xcap1, Xcap2;
var parar = 0;
var pos = 0

var imagenes = new Array()



//**** Apartado para añadir las imagenes *****
//**** Formato: addImag(Imagen, Direccion Web, Marco Destino); pos++;
//
//**** Importante: No olvidar añadir al final pos++;
//
addImag("1.jpg", "www.1.com", "_blank"); pos++;
addImag("2.jpg", "www.2.com", "_blank"); pos++;
addImag("4.jpg", "www.4.com", "_blank"); pos++;
addImag("5.jpg", "www.5.com", "_blank"); pos++;
addImag("4.jpg", "www.4.com", "_blank"); pos++;



function addImag(imagen,url,destino)
{
imagenes[pos] = new Image()
imagenes[pos].src = imagen
imagenes[pos].a = url
imagenes[pos].target = destino
}


function escribe()
{
for (m=0;m<imagenes.length;m++)
{ tam +=imagenes[m].width //**** Calcula la suma de los anchos de todas las imagenes ****
}
if (ancho > tam) //**** Si el ancho especificado es mayor que la suma de la imagenes ... ****
{ ancho = tam -dis //**** ...ajusto el ancho al de las imagenes ****
}

document.write ('<div id ="fuera" style="position:relative; width:' + ancho + 'px; height:' + alto + 'px;overflow:hidden">');
document.write ('<span id="capa1" style="position:absolute; width:' + tam + 'px;height:' + alto + 'px; left = -' + tam + 'px;" onmouseover="parar=1 " onmouseout="parar=0">');
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="imag' + m + '" name="imag' + m + '" >');

if (imagenes[m].a != "")
{
document.write ('</a>')
}
}
document.write ('</span>');
document.write ('<span id="capa2" style="position:absolute; width:' + tam + 'px;height:' + alto + ';left=0;" onmouseover="parar=1 " onmouseout="parar=0">');

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 + '" >');
if (imagenes[m].a != "")
{
document.write ('</a>')
}
}
document.write ('</span></div>');


}




function mueve()
{
Xcap1 = document.getElementById('capa1').style.left;
Xcap1 = Xcap1.replace(/px/,"");
Xcap1 = Xcap1.replace(/pt/,"");
Xcap1 = new Number(Xcap1);

Xcap2 = document.getElementById('capa2').style.left;
Xcap2 = Xcap2.replace(/px/,"");
Xcap2 = Xcap2.replace(/pt/,"");
Xcap2 = new Number(Xcap2);

if (parar==0) // Si NO se posiciona el raton encima del carrusel...
{
Xcap1 += dis;
Xcap2 += dis;

if (Xcap2 > (ancho + dis) ) //**** Si la capa 2 se sale del area... ****
{
Xcap2 = Xcap1 - ( tam + dis ); //**** ...posiciona la capa 2 delante de la capa 1 ****
document.getElementById('capa2').style.left = Xcap2;
}
else
{
document.getElementById('capa1').style.left = Xcap1
}


if (Xcap1 > (ancho + dis) ) //**** Si la capa 1 se sale del area... ****
{
Xcap1 = Xcap2 - (tam + dis ) //**** ...posiciona la capa 1 delante de la capa 2 ****
document.getElementById('capa1').style.left = Xcap1;
}
else
{
document.getElementById('capa2').style.left = Xcap2
}
}
setTimeout("mueve()",velo);
}



function inicio()
{
reDimCapas();
mueve();
}



function reDimCapas()
{
for (m=0;m<imagenes.length;m++)
{
document.getElementById('capa1').style.left = (-tam +10);
document.getElementById('capa1').style.width = tam ;
document.getElementById('capa2').style.width = tam;
}
}

</SCRIPT>

</HEAD>
<BODY onload="inicio()">

<div id="a0"></div>

<TABLE width="51%" align=center border=0>
<TBODY>
<TR>
<TD align=middle>
<script>

escribe()</script>
</TD>
</TR>
</TBODY>
</TABLE>


</BODY>
</HTML>

Saludos. Juanjo (Pellagofio)
  #2 (permalink)  
Antiguo 03/01/2004, 16:35
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 8 meses
Puntos: 381
Huy qué ilu un post a mi nombre!

Caramba, qué surprise.... mañana me lo miro con calma (que a estas horas yá no me dan las neuronas ) y te comento mis impresiones

Un saludote!
  #3 (permalink)  
Antiguo 08/01/2004, 06:51
 
Fecha de Ingreso: noviembre-2003
Mensajes: 383
Antigüedad: 20 años, 5 meses
Puntos: 2
Para tunait

Tunait, he continuado trabajando en tu script y esto es lo último que he hecho.

Las modificaciones más importantes que he hecho son:

.- Una función para añadir las imagenes al array.
.- Si el ancho del carrousel es mayor que la suma de los anchos de las imagenes, el carrousel se ajusta a la suma.
.- Ajusta el alto del carrousel a la imagen más alta.
.- Puedes especificar si las imagenes se ajustan a la parte superior, central o inferior del carrousel.
.- Cada imagen se crea por separado y se desplaza individualmente.
.- Puedes especificar la posición X e Y del carrousel.
.- Puedes especificar el color de fondo del carrousel.




<HTML>
<HEAD>
<TITLE>Carousel de imágenes (marquesina horizontal)</TITLE>

<SCRIPT language=JavaScript type=text/JavaScript>
var XCarrousel = 150; // Posición horizontal del carrousel
var YCarrousel = 10; // Posición vertical del carrousel
var anchoCarrousel = 1000; // Ancho del carrousel
var alto = 0; // Alto del carrousel
var velo = 30; // velocidad
var dis = 1; // cantidad de pixels que desplaza por movimiento
var FondoCarrousel="White"; // Color de fondo para el carrousel
var centrarImag =1; // Alinea verticalmente las imagenes 0=Superior; 1=Centro; 2=Inferior ...
// ...si las imagenes son de altos diferentes
var YPos = 0; // Posición vertical.
var tam = 0;
var ancho = 0;
var parar = 0;
var PosCap = 0;
var item = 0;
var imagenes = new Array()
var n = 0;
var m = 0;
var elementos = 0;
var XPos = new Array();


//**** Apartado para añadir las imagenes *****
//**** Formato: addImag(Imagen, Direccion Web, Marco Destino); pos++;
//
//**** Importante: No olvidar añadir al final item++;
//
addImag("1.jpg", "www.1.com", "_blank"); item++;
addImag("2.jpg", "www.2.com", "_blank"); item++;
addImag("4.jpg", "www.1.com", "_blank"); item++;



function addImag(imagen,url,destino)
{
imagenes[item] = new Image()
imagenes[item].src = imagen
imagenes[item].a = url
imagenes[item].target = destino
}


var elementos = imagenes.length;

function escribe()
{
for (m=0;m<=elementos-1;m++)
{ tam +=imagenes[m].width; //**** Calcula la suma de los anchos de todas las imagenes ****
if (alto<imagenes[m].height) //**** Establece el alto del carrousel a la imagen más alta ****
alto=imagenes[m].height;
}


if (anchoCarrousel > tam) //**** Si el ancho especificado es mayor que la suma de la imagenes ... ****
anchoCarrousel = tam; //**** ...ajusto el ancho al de las imagenes ****

PosCap=0-imagenes[0].width; //**** La primera capa empezará fuera del margen izquierdo ****

document.write ('<div id ="fuera" style="left='+XCarrousel+'px;top='+YCarrousel+'px; background-color='+FondoCarrousel+'; position:relative; width:'+anchoCarrousel+'px; height:'+alto+'px; overflow:hidden">');

for (m=0;m<=elementos*2-1;m++)
{ XPos[m]=PosCap;
switch (centrarImag)
{
case 0: //**** Alineación superior
YPos=0;
break;
case 1: //**** Centrar
YPos=(alto/2)-(imagenes[n].height/2);
break;
case 2: //**** Alineación inferior
YPos=(alto-imagenes[n].height);
}


document.write ('<span id='+m+' style="position:absolute; width:'+imagenes[n].width+'px; height:'+alto+'px; top='+YPos+'px; left ='+XPos[m]+'px;" onmouseover="parar=1" onmouseout="parar=0">');
if (imagenes[n].a != "")
document.write('<a href="'+imagenes[n].a+'" target="'+imagenes[n].target+'">');

document.write ('<img border="0" src ="'+imagenes[n].src+'" >');

if (imagenes[n].a != "")
document.write ('</a>');

document.write ('</span>');
PosCap+=imagenes[n].width; //**** Calcula la posición de la siguiente capa ****
n++; //**** Aumenta el contador de los elementos (imagenes) ****
if (n==elementos) //**** Si el contador es igual al maximo de elementos ... ****
n=0; //**** ...vuelve a empezar en el elemento 0 ****

}
document.write ('</div>');
mueve();

}


function mueve()
{
if (parar==0) // Si NO se posiciona el raton encima del carrusel...
{
for (m=0;m<=elementos*2-1;m++)
{
if (m==elementos*2-1)
n=0;
else
n=m+1;

if (XPos[m]>anchoCarrousel)
{
ancho=document.getElementById(m).style.width; //**** Obtiene el ancho de la imagen actual ****
ancho = ancho.replace(/px/,""); //**** Le quita los caracteres px a la variable ****
XPos[m]=XPos[n]-ancho+dis; //**** calcula la posicion fuera del margen izquierdo ****
}
else
XPos[m]=XPos[m]+dis;

document.getElementById(m).style.left = XPos[m];
}
}
setTimeout("mueve()",velo);
}






</SCRIPT>

</HEAD>
<BODY>
<div id="a0"></div>
<table >
<tr ><td >
<script>
escribe()
</script>
</td></tr>
</table>


</BODY>
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:19.