0

我必须以特定的时间间隔更改背景图像。背景中将有大约 4-5 张图像将被更改。我还想要一个很好的过渡效果，其中一个图像开始褪色，甚至在它完全褪色之前下一张图像开始褪色。

有关所需功能，请查看http://www.virgin-atlantic.com/gb/en.html

我的结构如下：

<div class="items">
            <div id="backWallpaper" style="left: 0px; top: 0px; overflow: hidden; position: absolute;
                z-index: -1; margin: 0px; padding: 0px; display: none;" class="carousel_item">
                <img class="bg_slider" src="images/bg_img_01.jpg" alt="Get the most out of your Trade In">
            </div>
            <div id="backWallpaper" style="left: 0px; top: 0px; overflow: hidden; position: absolute;
                z-index: -1; margin: 0px; padding: 0px; display: none;" class="carousel_item">
                <img class="bg_slider" src="images/bg_img_02.jpg" alt="Get the most out of your Trade In">
            </div>
            <div id="backWallpaper" style="left: 0px; top: 0px; overflow: hidden; position: absolute;
                z-index: -1; margin: 0px; padding: 0px; display: none;" class="carousel_item">
                <img class="bg_slider" src="images/bg_img_03.jpg" alt="Get the most out of your Trade In">
            </div>
            <div id="backWallpaper" style="left: 0px; top: 0px; overflow: hidden; position: absolute;
                z-index: -1; margin: 0px; padding: 0px; display: none;" class="carousel_item">
                <img class="bg_slider" src="images/bg_img_04.jpg" alt="Get the most out of your Trade In">
            </div>
        </div>

交换图像的代码如下：

$(window).load(function () {
            //load first background after page loads.
            $('.carousel_item').eq(0).fadeIn(2000);
            setTimeout(changeBackground, 4000);
        });

        //indexers
        var fadeOut = 0;
        var fadeIn = 1;

        function changeBackground() {
            //fadeOut the first image
            $('.carousel_item').eq(fadeOut).fadeOut(1000);
            //fadeIn the second image
            $('.carousel_item').eq(fadeIn).fadeIn(1500);
            //increament indexers
            fadeOut += 1;
            fadeIn += 1;
            //if indexer becomes greater than 3 reset it to 0
            if (fadeOut > 3)
                fadeOut = 0;
            if (fadeIn > 3)
                fadeIn = 0;

            //again set the timeout to loop.
            setTimeout(changeBackground, 4000);
        }

现在的问题是代码的行为很奇怪。直到最后一张图像，即（索引：3）图像显示正常。之后，最后一张图片似乎卡住了。好像由于某种原因，fadeOut 对最后一个索引不起作用。

请告知此代码设置中可能出现的问题。

4

2 回答 2

5

这个jsfiddle有效：

var current = 0,
    speed = 1500,
    $imgs = $('img', '#slider'),
    imgAmount = $imgs.length;

$imgs.css('position', 'absolute').hide().first().show();

function swapImages() {
    var $currentImg = $($imgs[current]);
    if(current == imgAmount-1) current = -1;
    var $nextImg = $($imgs[++current]);
    // animation speed should be the same for both images so we have a smooth change
    $currentImg.fadeOut(speed);
    $nextImg.fadeIn(speed);
}

window.setInterval(swapImages, 4000);
于 2012-07-02T11:25:54.757 回答
0

为了进一步测试这个问题，我将 carousel_item div 上的样式负载移至 css 类，并注意到 fadeOut 没有删除 div 上的display:block属性。

fadeOut 似乎对具有 0 宽度和 0 高度的元素有问题，所以当我postion:absolute从 carousel_item div 中删除它们时，它们会增长到包含图像的大小，瞧问题就解决了。

要进一步了解该问题，请检查此链接上接受的答案 jQuery fadeOut is not changed display property

感谢 simon 和 jfrej 的帮助和 jsFiddle 设置。

于 2012-07-02T12:39:38.153 回答