自动更改网页壁纸,具有淡化效果

时间:2013-05-25 16:03:42

标签: javascript jquery html wallpaper

我正在为我的项目创建一个网页,该网页要求背景图像每10秒钟更换一次并进行漂亮的过渡(如淡化效果)。我设法自动更换壁纸,但我无法配置它我该怎么做。下面是我写的代码。我面临两个问题,如下所述。

1)每当图像每10秒钟发生变化时,我会看到 BLANK BACKGROUND(白色背景,没有图像)

2)我无法配置如何在背景改变时添加平滑过渡,如淡入效果。

的index.html

<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>

的style.css

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;
}

1 个答案:

答案 0 :(得分:0)

不要重新发明轮子,研究已经完成的工作并在必要时进行扩展这是Charles Darwinish的编程理论。您的答案取决于此页www.slidesjs.com /