jquery - 使用漂亮的过渡效果更改背景图像 - Jquery

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