如何旋转4个(或更多)图像,每个图像之间的淡入淡出？

Question

我有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 else,所以它可用.由于图像较大,我还需要立即处理未加载的图像.

Answer 1

我强烈推荐jQuery Cycle插件.在这种情况下,它可能比你正在寻找的更多,但它结构合理,易于设置.还有一个名为jQuery Cycle Lite的轻量级版本,它只支持淡入淡出过渡.

Answer 2

您可以使用a div和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背景设为"旧"图像,img将新背景设为新图像.我们设置img为0不透明度,并将其淡入,因此看起来好像旧图像正在淡入新图像.淡入后,div不再显示.

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