2

我目前有：

<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds){
//change the image
if(!imageID){
    document.getByTagName("body").src="icwXI.jpg";
    imageID++;
}
else{if(imageID==1){
    document.getByTagName"body").src="JvuP9.jpg";
    imageID++;
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*20)); 
</script>
</head>
<body style='background: url(icwXI.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;' onload='changeimage(1)'>

目的是让身体背景图像最初加载 icwXI.jpg，然后在 20 秒后更改为 JvuP9.jpg，然后再过 2 秒再循环回到 icwXI.jpg。

但是它似乎不起作用，我的 JavaScript 技能非常有限。

谢谢你。

4

2 回答 2

3

创建一组背景图像 - 下面我用一些 placekitten 图像完成了这项工作。其次，创建一个函数，用数组中的下一个更改背景。为了跟踪我们的位置，我们将使用一个变量（我们可以.indexOf在较新的浏览器中使用 on 数组，尽管在某些区域支持较弱）。

最后，我们将创建一个每 23 秒运行一次的间隔。当它运行时，它会调用我们的 swapBG 函数，然后立即创建一个超时，该超时将在 2 秒后再次调用我们的 swapBG 函数。

// backImg for tracking which image we're showing
// dbStyle is a quick reference to the style list on the body
// backgnd is an array of potential background images
var backImg = -1,
    dbStyle = document.body.style,
    backgnd = [
        'url(http://placekitten.com/350/350)',
        'url(http://placekitten.com/349/349)'
    ]; 

// Steps forward through background images, then back to start
// when it reaches the end of the list
function swapBG() {
    dbStyle.backgroundImage = backgnd[ backImg++ ]
        ? backgnd[ backImg ]
        : backgnd[ backImg = 0 ];
}

// Call swapBG() immediately
swapBG();

// Create an interval that runs every 23 seconds
setInterval(function(){
   swapBG();
   // Create a timeout to run after 2 seconds
   setTimeout(function(){ 
       swapBG()
   }, 2000 );
}, 23000);​

演示：http: //jsfiddle.net/XsAWB/2/

于 2012-06-02T03:21:09.667 回答
0

  1. 首先，您需要修复一些语法错误。我看到的前两个没有完成两个开始{括号，并且在第二个括号上缺少括号document.getByTagName。

  2. 您的函数在第一次调用时不会“休眠/超时”，调用函数时会立即更改背景图像。

  3. 另请注意，当您setTimeout()重复它的功能时，第二个参数实际上是毫秒，而不是您似乎打算的秒。

  4. 您的函数只会修改<body>两次，因为imageID不断增加，并且只有未设置的情况（实际上应该检查imageID==0）和 1。您需要更改它，因此每个背景都有您想要旋转的情况。

  5. document.getTagByName("body").src不是更改背景图像的正确方法。document.body.style.backgroundImage是。

于 2012-06-02T02:50:50.523 回答