Wie kann man 4 (oder mehr) Bilder drehen, zwischen den Bildern verschwinden?

Question

Ich habe 4 Bilder, die ich in einer Schleife zwischen einander verblassen möchte. Ich habe so etwas wie die folgenden:

<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;" /> 

Ich bin für Revisionen des HTML, obwohl ich nicht die absolute Positionierung in diesem Fall verwendet werden kann. Ich benutze jQuery sonst wo auf der Website, also ist es verfügbar. Ich muss auch damit umgehen, dass ein Bild nicht sofort geladen wird, da die Bilder größer sind.

Answer 1

Ich würde das jQuery Cycle Plugin sehr empfehlen. Es kann mehr tun als Sie in diesem Fall suchen, aber es ist gut strukturiert und einfach einzurichten. Es gibt auch eine Lightweight-Version namens jQuery Cycle Lite, die nur Fade-Übergänge unterstützt.

Answer 2

können Sie verwenden ein div und ein img, etwa so:

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

In Ihrem Javascript tun so etwas wie dieses (pseudo-jQuery):

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

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

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

Im Grunde haben wir die div machen ' s Hintergrund das "alte" Bild, und das img das neue. Wir setzen die img auf 0 Opazität, und verblassen es, so scheint es, als ob das alte Bild in das neue Bild verblasst. Nach dem Einblenden wird die div nicht mehr angezeigt.

Achten Sie darauf, das CSS entsprechend einzurichten, um die Breite/Höhe von div und die Hintergrundposition einzustellen.

Answer 3

Ich habe auch diese Erweiterung jQuery: http://www.linein.org/blog/2008/01/10/roate-image-using-jquery-with-plugin/

Es scheint es ganz gut zu tun, obwohl eine Menge Code für nicht zu viel.

Edit: Ich habe auch die Nivo Slider gefunden, die ich ziemlich oft benutzt habe und gut funktioniert hat. Es hat auch die Fähigkeit, "Navigation" und prev/next-Tasten zu haben. Ziemlich praktisch.

Answer 4

können Sie mit dem Kern von jQuery bleiben und haben eine Schleife, um den Z-Index bringen ..

es kann auf eine sehr einfache Art und Weise durchgeführt werden ...