移除白色'背景图像褪色时的效果

Remove white 'flash' effect when fading background images jQuery

本文关键字：褪色 图像 背景 白色      更新时间：2023-09-26

我试图在褪色背景图像时摆脱背景颜色的白色闪光。我想让这些图像彼此淡入/淡出。

这是我的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;
}

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

  • 使用绝对定位和z-index
    • 在当前可见的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);
});

相关文章：