我试图在褪色背景图像时摆脱背景颜色的白色闪光。我想让这些图像彼此淡入/淡出。
这是我的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);
});