Question

我必须以特定间隔更改背景图像。背景中将有大约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由于某种原因不适用于最后一个索引。

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

Answer 1

此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);

Answer 2

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

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

进一步阅读有关问题的请求，请在此链接上查看已接受的答案 jQuery fadeOut is not changing display property

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

用漂亮的过渡效果改变背景图像 - Jquery

2 个答案: