Question

我正在编写一个网站，其中一个摘要是让背景图像在6个或更多不同的图像之间变化。必须将背景固定到位并将文本滚动到其上。这部分我已经完成了以下Javascript

function RotatingBackground() {
var curImgId = 6;
var numberOfImages = 6; // Change this to the number of background images
var my_image0 = new Image(); my_image0.src = 'background_images/0.jpg';
var my_image1 = new Image(); my_image1.src = 'background_images/1.jpg';
var my_image2 = new Image(); my_image2.src = 'background_images/2.jpg';
var my_image3 = new Image(); my_image3.src = 'background_images/3.jpg';
var my_image4 = new Image(); my_image4.src = 'background_images/4.jpg';
var my_image5 = new Image(); my_image5.src = 'background_images/5.jpg';
var my_image6 = new Image(); my_image6.src = 'background_images/6.jpg';
if (curImgId > 6006) { curImgId = 6;}
window.setInterval(function() {
    $('body').css('background-image','url(background_images/' + curImgId + '.jpg)');
    curImgId = (curImgId + 1) % numberOfImages;
}, 5 * 1000);

}

我将Body Load上的代码调用如下

<body style="background: url(./background_images/0.jpg) no-repeat center center fixed; background-size: cover; margin:0; padding:0;" onLoad="RotatingBackground()">

我遇到的问题是它们突然改变，加载大约四分之一秒，尽管试图在JS函数的顶部预加载图像。

我尝试了各种交叉淡入淡出技术，但它们要么不能正确缩放图像，要么不保持背景固定。是否有一种简单的方法可以使用一点CSS或JS（甚至是JQuery）从一个图像平滑过渡到另一个图像？（重点放在简单，因为我不是很好用javascript）。

使用Javascript交叉淡入淡出背景图像

0 个答案: