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)