Tema: Para tunait
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 08/01/2004, 06:51
pellagofio
 
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>