背景图像幻灯片过渡问题

Question

我需要帮助来改进我的背景图片幻灯片的脚本。

我设法用.fadeIn(600) JS 函数创建了一个淡入 效果。但是，我希望图像在彼此之间切换，而不是在白色背景之间切换。

换句话说，我需要平滑图像之间的过渡。

请注意，每张图片都有一个标题，但我可以接受。我不需要任何文本转换。

JSFiddle http://jsfiddle.net/newsha/B4TXj/

    var timer;
$(document).ready(function () {
    // background image on load
    var numberImages = 4
    var images = [];
    for (var i = 1; i <= numberImages; i++) {
        images.push(i);
    }
    var imgValue = 1
    $('.backgroundImage').addClass('bg' + imgValue + '');

    // Switch background image - forwards
    $('.imgSwitchRight').click(function () {
        $('.backgroundImage').each(function (e) {
            $(this).removeClass('bg1 bg2 bg3 bg4').fadeOut(0);
        });
        clearTimeout(timer);
        timer = setTimeout(function () {
            $('.imgSwitchRight').click();
        }, 8000);
        if (imgValue < numberImages) {
            imgValue++
        } else {
            imgValue = 1
        }

        $('.backgroundImage').addClass('bg' + imgValue + '').fadeIn(600);

    });
    clearTimeout(timer);
    timer = setTimeout(function () {
        $('.imgSwitchRight').click();
    }, 8000);

    // Switch background - backwards
    $('.imgSwitchLeft').click(function () {
        $('.backgroundImage').each(function (e) {
            $(this).removeClass('bg1 bg2 bg3 bg4').fadeOut(0);
        });
        clearTimeout(timer);
        timer = setTimeout(function () {
            $('.imgSwitchRight').click();
        }, 8000);

        if (imgValue > 1) {
            imgValue--
        } else {
            imgValue = numberImages
        }
        $('.backgroundImage').addClass('bg' + imgValue + '').fadeIn(600);

    });
    clearTimeout(timer);
    timer = setTimeout(function () {
        $('.imgSwitchRight').click();
    }, 8000);
});

Answer 1

我只是使用了第二个 div 作为交换平面。可见的 div 现在正在淡出，而不可见的 div 正在淡入。之后角色被切换并继续下去。仍然存在一个问题。如果切换图像太快，类“堆栈”，因为渐变 div 的动画被中断，并且类不会被删除.. 问题解决了..

var timer;
$(document).ready(function () {
    // background image on load
    var numberImages = 5,
        easetime = 2000,
        changetimeout = 5000;

    var images = [];
    for (var i = 1; i <= numberImages; i++) {
        images.push(i);
    }
    var imgValue = 1;
    var visibleBackground = $('.backgroundImage.a');
    var invisibleBackground = $('.backgroundImage.b');
    $('.backgroundImage').hide();
    visibleBackground.addClass('bg' + imgValue + '').show();

    var dir = 1;
    function changeBG(){
        oldValue = imgValue;
        imgValue = (imgValue+dir)%numberImages;
        $('.rotating-text'+imgValue).fadeIn(easetime);
        $('.rotating-text'+oldValue).fadeOut(easetime);
        clearTimeout(timer);
        timer = setTimeout(function () {
            changeBG();
        }, changetimeout);
        visibleBackground.fadeOut(easetime);
        setTimeout(function(){
            var tmpBackground = visibleBackground, tmpVal = oldValue;
            return function(){
                tmpBackground.removeClass('bg' + tmpVal)
            }
        }(), easetime);
        invisibleBackground.addClass('bg' + imgValue + '').fadeIn(easetime);

        var swap = visibleBackground;
        visibleBackground = invisibleBackground;
        invisibleBackground = swap;
    }

    // Switch background image - forwards
    $('.imgSwitchRight').click(function () {
        dir = 1;
        changeBG()
    });

    // Switch background - backwards
    $('.imgSwitchLeft').click(function () {
        dir = -1;
        changeBG()
    });
    timer = setTimeout(function () {
        changeBG();
    }, changetimeout);
});

http://jsfiddle.net/B4TXj/11/