Comment faire pivoter 4 (ou plus) images, se fanant entre chacun?

J'ai 4 images, qui je veux de fondu entre les uns des autres dans une boucle. J'ai quelque chose comme ce qui suit:

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

Je suis pour la révision de l'HTML, bien que je ne peux pas utiliser le positionnement absolu dans ce cas. Je suis à l'aide de jQuery ailleurs sur le site, il est donc disponible. J'ai aussi besoin pour faire face à une image qui n'est pas chargé tout de suite que les images sont plus grandes.

source d'informationauteur Darryl Hein

  1. 21

    Je recommande fortement la jQuery Cycle plugin. Il peut faire plus que ce que vous cherchez dans ce cas, mais il est bien structuré et facile à l'installation. Il y a aussi une version allégée appelé jQuery Cycle Lite qui vient soutenir les transitions en fondu.

  2. 5

    Vous pouvez utiliser un div et un imgcomme suit:

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

    Dans votre Javascript faire quelque chose comme ceci (pseudo-jQuery):

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

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

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

    Fondamentalement, nous faisons le div'arrière-plan le "vieux" de l'image, et la img la nouvelle. Nous avons mis la img à 0 opacité, et en fondu, de sorte qu'il apparaît comme si l'ancienne image est en train de disparaître dans le nouveau. Après le fondu, la div n'est pas plus démontrée.

    Prendre soin d'installer le CSS de manière appropriée pour définir la largeur/hauteur de l' div et l'arrière-plan position le cas échéant.

  3. 1

    vous pouvez rester avec la base de jQuery et une boucle afficher le z-index..

    il peut être fait d'une manière très simple...

  4. 1

    J'ai aussi trouvé cette extension de jQuery: http://www.linein.org/blog/2008/01/10/roate-image-using-jquery-with-plugin/

    Il semble le faire tout à fait bien, même si beaucoup de code pour pas trop.

    Edit: j'ai aussi trouvé le Nivo Slider que j'ai utilisé très souvent et a été très bien fonctionner. Il a aussi la capacité d'avoir "navigation" et prev/next boutons. Ce qui est très pratique.