Comunidad de diseño web y desarrollo en internet online

cambio de Imagenes con JS

Citar            
MensajeEscrito el 31 May 2008 12:53 am
Hola necesito saber, como puedo cambiar imagenes cada determinado tiempo, con este codigo lo consigo, el problema es que si la imagen tarda en cargar mas tiempo del que tengo no se ve :S, y se queda un tiempo sin imagen y se ve muy feo, como sigo hacer esto? y si le puede agregar algun tipo de transicion como desvanecimiento, etc., gracias. algun manual, tutorial o codigo,, gracias... y alguna sujerencia si tengo codigo de mas o lo puedo simplificar muchas gracias...

Código :

<!-- Comienza
var mfBanners = [
             ['imagenes.htm', 'imagenes/5.jpg'], 
             ['imagenes.htm', 'imagenes/4.jpg'], 
             ['imagenes.htm', 'imagenes/3.jpg'], 
             ['imagenes.htm', 'imagenes/2.jpg'], 
             ['imagenes.htm', 'imagenes/1.jpg']
];
var mfIe = false;
if( document.all) {
mfIe = true;
}
var mfBannerIndex = 0;
function mfBannerChange() {
var htmlString = '<a target="_blank" href="'+mfBanners[mfBannerIndex][0]+'"> <img border="0" src="'+mfBanners[mfBannerIndex][1]+'" alt="click par ir a las imagenes" width="170" height="170" border="0" class="imgs"/></a>';
if( mfIe) {
document.all.banner.innerHTML = htmlString;
}
else {
document.layers["banner"].document.open();
document.layers["banner"].document.write( htmlString);
document.layers["banner"].document.close();
}
if(mfBannerIndex < mfBanners.length - 1)
mfBannerIndex++;
else
mfBannerIndex = 0;
}
setInterval("mfBannerChange()", 5000);
//  End -->

Por No Existe

41 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 01 Jun 2008 01:13 pm
Preguntas varias cosas.
En principio, deberías manejar JavaScript para lo que pides (y saber usarlo)

Para que no aparezca en blanco mientras carga, deberías "precargar" antes todas las imágenes:
<script>
a1=new Image();
a1.src='url_imagen';
</script>
Este es el código para precargar una imágen, de manera que cuando la llames, no tenga que cargarse, sino que estará ya en la caché del navegador.

Para que haya un desvanecimiento entre una y otra, deberías mostrar las dos, cada una, en un div, superpuestas, y controlar su "opacity".
En fin...
Un script más o menos complejo, que haría correr un temporizador que controlaría:
- El z-index
- La opacity
- Y el .src de cada una.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.