Question

我在褪色背景图片时试图摆脱背景颜色的白色闪光。我希望这些图片能够淡入/淡出彼此。

这是我的jQuery，HTML和CSS代码

HTML：

<div id="wrapper"></div>

使用Javascript：

 $(window).load(function() {          
          var i =0;
          var images = ['assets/img/cake_2.jpg','assets/img/cake_3.jpg', 'assets/img/cake_1.jpg'];
          var image = $('#wrapper');
                        //Initial Background image setup
          image.css('background-image', 'url(assets/img/cake_1.jpg)');
                        //Change image at regular intervals
          setInterval(function(){  
           image.fadeOut(6000, function () {
           image.css('background-image', 'url(' + images [i++] +')');
           image.fadeIn(6000);
           });
           if(i == images.length)
            i = 0;
          }, 1000);           
});

CSS：

#wrapper {
    width:              100%;
    height:             100%;
    margin:             0 auto;
    z-index:            -1;
    position:           absolute;
    overflow:           hidden;
}

Answer 1

在下一张图像开始淡入之前，您将完全淡出当前图像。这会导致动画中间的白色背景。这是一个解决方案：

使用绝对定位和z-index将包含 next 图像的div放在当前可见div的后面
淡出当前 div

这样，当前图像将平滑淡入下一个图像。

$(window).load(function () {
    var i = 0;
    var images = [
        'http://dummyimage.com/300x200/FC0/000&text=Slide+1',
        'http://dummyimage.com/300x200/CF0/000&text=Slide+2',
        'http://dummyimage.com/300x200/0FC/000&text=Slide+3'];
    $('#wrapper').css('background-image', 'url(' + images[i] + ')');
    setInterval(function () {
        if (++i === images.length) {
            i = 0;
        }
        console.log(i);
        $('#nextimg').css('background-image', 'url(' + images[i] + ')');
        // transition animation: 2s
        $('#wrapper').fadeOut(2000, function () {
            $('#wrapper').css('background-image', 'url(' + images[i] + ')').show();
        });
        // slide change: 3s
    }, 3000);
});

Demo

在淡化背景图像jQuery时删除白色'闪光'效果

1 个答案: