Cómo hacer un banner fade como este?

[rodeirojg]

Hola gente del foro,

Me comunico con una nueva duda existencial. He hecho varios banners, pero casi todos con flash. Lo que quiero lograr es un banner como el siguiente:

http:// www . programadorphp . net/ (quitar espacios)

Lo que más me interesa en realidad es conseguir el mismo efecto: que haga un fade de una imagen a otra, como si una estuviera transparentándose y otra opacándose al mismo tiempo y de a poco.

Lo escribí en la categoría javascript, pero no sé si es javascript la solución exacta a esto.


Saludos!

[Perr0]

te dejo un ejemplo...

Código Javascript:

<script>
var wDiv = 850; // ANCHO DIV
var hDiv = 315; // ALTO DIV
var nDiv = 0;
var objeto;
var cDivA, cDivB;
var contador = 0;
window.onload = function(){
    im = new Array(
         "http://facebookportadas.com/imagenes/cosasquehacerhoy.jpg",
         "http://facebookportadas.com/imagenes/foreveralone.jpg",
         "http://facebookportadas.com/imagenes/cerdito.jpg",
         "http://facebookportadas.com/imagenes/mesuenasdeverte.jpg",
         "http://facebookportadas.com/imagenes/gatogafas.jpg",
         "http://facebookportadas.com/imagenes/naranja.jpg",
         "http://facebookportadas.com/imagenes/vacapollo.jpg"
         );
    totImg = im.length;
    if(typeof(im)==="undefined" || totImg<2){
        alert("Error con imágenes")
        return false;
    }
    cDivA = divs(cDivA, im[0]);
    cDivB = divs(cDivB, im[1]);
    cont = document.getElementById("cargarBanners");
    cont.appendChild(cDivA);
    cont.appendChild(cDivB);
    div1 = document.getElementById("uno");
    div2 = document.getElementById("dos");
    fadeIn(1,0);
}
function divs(obj, img){
    obj = document.createElement("div");
    obj.id = (nDiv==0) ? "uno" : "dos";nDiv++;
    obj.style.width = wDiv+"px";
    obj.style.height = hDiv+"px";
    obj.style.position = "absolute";
    obj.style.opacity = 0;
    obj.style.filter = "alpha(opacity=" + 0 + ")";
    return obj;
}
function fadeIn(obbj, transparecncia){
    objeto = (obbj==1) ? div1 : div2;
    if(transparecncia==0){
        contador++;
        if(contador > totImg) contador = 1;
        objeto.style.backgroundImage = "url('" + im[contador-1] + "')";
    }
    objeto.style.opacity = transparecncia/100;
    objeto.style.filter = "alpha(opacity=" + transparecncia + ")";
    transparecncia = transparecncia + 2.5;
    loop = setTimeout("fadeIn("+obbj+","+transparecncia+")",60);
    if(transparecncia>=100){
        clearTimeout(loop);
        setTimeout("rotarDiv("+obbj+")",1000);
    }
}
function rotarDiv(pos){
    div1.style.zIndex = Math.abs(pos-1);
    div2.style.zIndex = pos;
    pos = (pos==0) ? 1 : 0;
    fadeIn(pos,0);
}
</script>
<p>Ejemplo banners...</p>
<p id="cargarBanners"></p>
 

salu2

[underwebinfo]

yo te dejo uno simple en jquery , bueno o basicamente la idea

Código Javascript:

// --- Imagenes
var imagenes = $('img');
var cantidad = $('img').lenght;
 
// --- For
for(var i=0;i<cantidad;i++){
 
    imagenes[i].fadeIn('slow',function(){
        $(this).fadeOut();
    });
    
    imagenes[i++].fadeOut('slow',function(){
        $(this).fadeIn();
    });
}
 

[rodeirojg]

Gracias a ambos por las respuestas, me sirvieron de mucho!