Question

我的网站上有一个背景幻灯片，每隔5秒就会改变一次图片。

这是Javascript / Jquery：

var currentBackground = 0;
var backgrounds = [];
backgrounds[0] = '../img/hero1.jpg';
backgrounds[1] = '../img/hero2.jpg';
backgrounds[2] = '../img/hero3.jpg';

function changeBackground() {
currentBackground++;
if(currentBackground > 2) currentBackground = 0;

$('.heroImg').fadeOut(300,function() {
    $('.heroImg').css({
        'background-image' : "url('" + backgrounds[currentBackground] + "')"
    });
    $('.heroImg').fadeIn(300);
});

setTimeout(changeBackground, 5000);
}

$(document).ready(function() {
setTimeout(changeBackground, 5000);        
});

此刻，图像淡入白色，然后变为下一张图像。

如何更改此代码以使图像相互淡化？

Answer 1

也许你应该只淡化图像而不是淡出它们，也许它会有更好的效果？

如何使这些css背景过渡更顺畅？

1 个答案: