Question

对于我目前正在设计的网站，我希望在一组图像的旋转中具有正文背景。我尝试了多种方法，即使用fadeIn（）和fadeOut（）函数，但它们似乎影响了体内分裂的不透明度。我也尝试过使用bgStretcher但这会导致外观问题并使网站变得缓慢而且不稳定。

我最好喜欢图像淡入淡出。帮助将不胜感激，

Here's a link to the website 我当前修改的脚本文件在/ js /目录下称为background.js。该文件目前已被注释掉，因为它只是实验性的。目前的两张背景图片是“images / bg / bg1.jpg”和“images / bg / bg2.jpg”

以下是我目前正在尝试使用的代码：

$(document).ready(function() {
    setInterval(switchImage, 5000);
    switchImage();

});

function switchImage()
{
$('body').css("background-image", "url(../images/bg/bg2.jpg)").fadeIn(1000);
$('body').css("background-image", "url(../images/bg/bg1.jpg)").fadeOut(1000);
}

一旦我弄清楚如何在背景图像之间转换，我可以简单地添加一些条件来在图像数组之间进行更改。

干杯，戴恩威尔逊

Answer 1

使用这个jQuery插件非常简单：jQuery Backstretch 在演示中“在幻灯片中使用后伸”是它的代码片段。

Answer 2

这可以仅使用css3完成。我很快就会发布一个小提琴。

编辑：我尝试用关键帧和CSS3的背景大小制作动画，但显然他们不想太好合作（闪烁）。或许可以更好地研究jQuery。

jQuery身体背景图像旋转器

2 个答案: