voltear una rotate rotar imagen grados girar efecto como jquery image fade

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



rotate image jquery (4)

Puedes usar un div y un img , así:

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

En tu Javascript, haz 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 del fondo del div la imagen "vieja" y la img la nueva. Configuramos el img en 0 opacidad y lo fundimos, por lo que parece que la imagen anterior se está desvaneciendo en la nueva. Después del fundido de entrada, el div no se muestra más.

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

Tengo 4 imágenes, que quiero desvanecer 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 listo para las revisiones del HTML, aunque no puedo usar 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.

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.

puedes quedarte con el núcleo de jQuery y tener un ciclo mostrar el índice Z.

se puede hacer de una manera muy simple ...