¿Cómo rotar 4 (o más) imágenes, desvaneciéndose entre cada una?

Question

Tengo 4 imágenes, que quiero fundir entre sí en un bucle. Tengo algo como lo siguiente:

<img src="/images/image-1.jpg" id="featureImg1" /> 
<img src="/images/image-2.jpg" id="featureImg2" style="display:none;" /> 
<img src="/images/image-3.jpg" id="featureImg3" style="display:none;" /> 
<img src="/images/image-4.jpg" id="featureImg4" style="display:none;" /> 

estoy para revisiones al HTML, aunque no puedo utilizar el posicionamiento absoluto en este caso. Estoy usando jQuery else en el sitio, por lo que está disponible. También necesito lidiar con una imagen que no se carga de inmediato ya que las imágenes son más grandes.

Answer 1

Recomiendo encarecidamente el complemento jQuery Cycle. Puede hacer más de lo que está buscando en este caso, pero está bien estructurado y es fácil de configurar. También hay una versión ligera llamada jQuery Cycle Lite que solo admite transiciones de desvanecimiento.

Answer 2

Se puede utilizar un div y un img, así:

<div id="featureImgContainer"> 
    <img src="/images/image-1.jpg" id="featureImg" /> 
</div> 

En su Javascript hacer algo como esto (pseudo-jQuery):

function rotateImage(newImage) { 
    var oldImage = $("#featureImg").image(); 

    $("#featureImgContainer").css({backgroundImage: "url('" + oldImage + "')"}); // TODO Escape URL 

    $("#featureImg").image(newImage).opacity(0).fadeIn(); 
} 

Básicamente, hacemos el div ' s fondo la imagen "vieja" y img la nueva. Configuramos el img en opacidad 0 y lo fundimos para que parezca que la imagen anterior se está desvaneciendo en la nueva. Después del fundido de entrada, el div ya no se muestra.

Tenga cuidado de configurar el CSS adecuadamente para establecer el ancho/alto de div y la posición de fondo donde corresponda.

Answer 3

También he encontrado que esta extensión de jQuery: http://www.linein.org/blog/2008/01/10/roate-image-using-jquery-with-plugin/

Parece que hacerlo bastante bien, a pesar de una gran cantidad de código para no demasiado.

Editar: También encontré el Nivo Slider que he usado con bastante frecuencia y que funcionó bastante bien. También tiene la capacidad de tener botones de "navegación" y prev/next. Muy útil.

Answer 4

puede quedarse con el núcleo de jQuery y tener un bucle que aparezca el índice z ..

se puede hacer de una manera muy simple ...