Javascript 自动更改网页墙纸,具有褪色效果
我正在为我的项目创建一个网页,要求背景图像每10秒改变一次,并有很好的过渡效果(如淡入淡出效果)。我设法自动更改墙纸,但我无法配置它。我如何才能做到这一点。下面是我编写的代码。我面临以下两个问题 1) 每当图像每10秒更改一次,我就会看到空白背景(白色背景,无图像) 2) 我无法配置如何在背景变化时添加平滑过渡效果,如淡入淡出效果 index.htmlJavascript 自动更改网页墙纸,具有褪色效果,javascript,jquery,html,wallpaper,Javascript,Jquery,Html,Wallpaper,我正在为我的项目创建一个网页,要求背景图像每10秒改变一次,并有很好的过渡效果(如淡入淡出效果)。我设法自动更改墙纸,但我无法配置它。我如何才能做到这一点。下面是我编写的代码。我面临以下两个问题 1) 每当图像每10秒更改一次,我就会看到空白背景(白色背景,无图像) 2) 我无法配置如何在背景变化时添加平滑过渡效果,如淡入淡出效果 index.html <html> <head> <title>Home | BM&A</title> &l
<html>
<head>
<title>Home | BM&A</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script tpye="text/javascript">
$(document).ready(function() {
var curImgId = 0;
var numberOfImages = 3;
window.setInterval(function() {
$('body').css('background-image','url(images/bg' + curImgId + '.png)');
curImgId = (curImgId + 1) % numberOfImages;
}, 10 * 1000);
})();
</script>
</head>
<body>
<img src="images/home_logo.png" alt="Logo" class="centeredImage" />
</body>
</html>
不要重新发明轮子,研究已经完成的工作,必要时扩展这就是查尔斯·达尔文的编程理论。您的答案在本页www.slidesjs.com上/
body {
background: #F4EEFE url(images/bgImage.png) center center fixed no-repeat;
-moz-background-size: 100%;
background-size: 100%;
}
.centeredImage {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -150px;
}