How to rotate 4 (or more) images, fading between each one?

问题

I have 4 images, which I want to fade between each other in a loop. I have something like the following:

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

I am up for revisions to the HTML, although I cannot use absolute positioning in this case. I am using jQuery else where on the site, so it's available. I also need to deal with an image not being loaded right away as the images are larger.

回答1:

I'd highly recommend the jQuery Cycle plugin. It may do more than you're looking for in this case, but it's well structured and easy to setup. There's also a lightweight version called jQuery Cycle Lite which just supports fade transitions.

回答2:

You can use a div and an img, like so:

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

In your Javascript do something like this (pseudo-jQuery):

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

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

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

Basically, we make the div's background the "old" image, and the img the new one. We set the img to 0 opacity, and fade it in, so it appears as if the old image is fading into the new one. After the fade in, the div isn't shown any more.

Take care to set up the CSS appropriately to set the width/height of the div and the background position where appropriate.

回答3:

you can stay with the core of jQuery and have a loop bring up the z-index..

it can be done in a very simple way...

回答4:

I have also found this extension to jQuery: http://www.linein.org/blog/2008/01/10/roate-image-using-jquery-with-plugin/

It seems to do it quite nicely, although a lot of code for not too much.

Edit: I also found the Nivo Slider which I've used quite often and has been working quite well. It also has the ability to have "navigation" and prev/next buttons. Quite handy.

来源：https://stackoverflow.com/questions/449599/how-to-rotate-4-or-more-images-fading-between-each-one

标签

jquery

image

fade