用漂亮的过渡效果改变背景图像 - 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);