14

我有 4 张图像，我想在一个循环中相互淡出。我有以下内容：

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

我准备修改 HTML，尽管在这种情况下我不能使用绝对定位。我在网站上的其他地方使用 jQuery，所以它是可用的。由于图像较大，我还需要处理未立即加载的图像。

4

4 回答 4

21

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.

于 2009-01-16T06:16:12.353 回答
5

您可以使用 adiv和 an img，如下所示：

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

在你的 Javascript 中做这样的事情（伪 jQuery）：

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

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

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

基本上，我们将div's 背景设为“旧”图像，并将其img设为新图像。我们将img不透明度设置为 0，然后将其淡入，因此看起来旧图像正在淡入新图像。淡入后，div不再显示。

注意适当地设置 CSS 以在适当的div地方设置背景位置的宽度/高度。

于 2009-01-16T06:05:42.717 回答
1

我还发现了 jQuery 的这个扩展：http ://www.linein.org/blog/2008/01/10/roate-image-using-jquery-with-plugin/

它似乎做得很好，虽然很多代码并不多。

编辑：我还发现了我经常使用并且运行良好的Nivo Slider 。它还具有“导航”和上一个/下一个按钮的能力。很方便。

于 2009-01-16T06:10:32.053 回答
1

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...

于 2009-01-18T17:20:49.253 回答