想要像褪色的东西一样顺利地改变bgs

时间:2011-09-12 15:47:19

标签: javascript html background fading

我花了很多天试图弄清楚如何动画背景图像过渡,但我找不到解决方案。我是网络开发的新手,所以请不要苛刻;)

以下是我从其他人处获得的一些示例代码:

var images = ['bg1.jpg', 'bg2.jpg', 'bg3.jpg'];
var curImage = 0;
function switchImage()
{
curImage = (curImage + 1) % images.length
document.body.style.backgroundImage = 'url(images/' + images[curImage] + ')'
}
window.setInterval(switchImage, 5000);

此代码会立即更改背景图像,但我希望新背景图像淡入。

以下是我正在创建的网页的链接:

http://preferredmerchantservices.net/

我希望有人可以帮助我,并提前感谢。

2 个答案:

答案 0 :(得分:1)

看看这个问题:

Fading in a background image

这是一个解释如何使用jQuery进行淡入淡出过渡的链接:

http://jqueryfordesigners.com/image-loading/

如果您需要jQuery库,可以将此代码粘贴到您的页面中:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

答案 1 :(得分:0)

如果您不想浪费太多时间试图找出自己,那么您应该使用jQuery之类的库。有了它,只需fadeIn()fadeOut()

由于您是Web开发的新手,您必须知道jQuery是一个非常流行的库,几乎每个人都在使用它。它可以让你编写更少的代码并做更多的事情。

但最重要的是,它确保了跨浏览器的兼容性。