转换多个背景图像

Question

尝试将图像过渡效果应用于特定div的固定bg图像。 目前看起来像 –

#top-header {
background: #FFF url('/images/image001.jpg') no-repeat top center fixed; 
width: 100%;height: 540px;
}   
<div id="top-header"></div>

我知道CSS3允许多个bg图像。由于图像是通过我的 CSS 调用的，是否可以将 javascript 应用于当前div 以实现淡入/淡出过渡效果？

谢谢！

Answer 1

你可以用JavaScript和CSS做很多事情，但这是一个非常解决的问题，有很多选项可以基本上显示幻灯片。因此，最好看看其中之一。但无论如何，让我们尝试一下！

.HTML：

<div id="slideshow"></div>​

.CSS：

#slideshow {
    border: 1px solid gray;
    height: 330px;
    width: 592px;
    opacity: 0;
}

JavaScript：

$(document).ready(function() {
    var timeToDisplay = 2000;
    var opacityChangeDelay = 50;
    var opacityChangeAmount = 0.05;
    var slideshow = $('#slideshow');
    var urls = [
       'http://sipi.usc.edu/database/preview/aerials/2.1.07.png',
       'http://sipi.usc.edu/database/preview/aerials/2.1.06.png',
       'http://sipi.usc.edu/database/preview/aerials/2.1.12.png'
    ];
    var index = 0;
    var transition = function() {
        var url = urls[index];
        slideshow.css('background-image', 'url(' + url + ')');
        index = index + 1;
        if (index > urls.length - 1) {
            index = 0;
        }
    };
    var fadeIn = function(opacity) {
        opacity = opacity + opacityChangeAmount;
        slideshow.css('opacity', opacity);
        if (opacity >= 1) {
            slideshow.trigger('fadeIn-complete');
            return;
        }
        setTimeout(function() {
            fadeIn(opacity);
        }, opacityChangeDelay);
    };
    var fadeOut = function(opacity) {
        opacity = opacity - opacityChangeAmount;
        slideshow.css('opacity', opacity);
        if (opacity <= 0) {
            slideshow.trigger('fadeOut-complete');
            return;
        }
        setTimeout(function() {
            fadeOut(opacity);
        }, opacityChangeDelay);
    };
    slideshow.on('fadeOut-complete', function(event) {
        transition();
        fadeIn(0);
    });
    slideshow.on('display-complete', function(event) {
        fadeOut(1);
    });
    slideshow.on('fadeIn-complete', function(event) {
        setTimeout(function() {
            slideshow.trigger('display-complete');
        }, timeToDisplay);
    });
    transition();
    fadeIn(0);
});​

演示：jsfiddle

当然，jQuery已经有了fadeIn和fadeOut，所以我们可以通过使用它们来简化我们的代码：

$(document).ready(function() {
    var timeToDisplay = 2000;
    var slideshow = $('#slideshow');
    var urls = [
       'http://sipi.usc.edu/database/preview/aerials/2.1.07.png',
       'http://sipi.usc.edu/database/preview/aerials/2.1.06.png',
       'http://sipi.usc.edu/database/preview/aerials/2.1.12.png'
    ];
    var index = 0;
    var transition = function() {
        var url = urls[index];
        slideshow.css('background-image', 'url(' + url + ')');
        index = index + 1;
        if (index > urls.length - 1) {
            index = 0;
        }
    };
    var run = function() {
        transition();
        slideshow.fadeIn('slow', function() {
            setTimeout(function() {
                slideshow.fadeOut('slow', run);
            }, timeToDisplay);
        });
    }
    run();
});​

演示：jsfiddle

我们也可以使用slideDown和slideUp：jsfiddle

那么为什么不直接使用它呢？好吧，但是我知道一个明显的缺陷：我们在确保浏览器已下载所有图像之前开始幻灯片。我们应该解决这个问题。毫无疑问，我们可能忽略了类似的问题，但您可以选择使用什么。