Question

我目前有：

<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技能非常有限。

谢谢。

Answer 1

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

最后，我们将创建一个每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/

Answer 2

首先，您需要修复一些语法错误。我看到的前两个没有完成两个开始{括号，并且在第二个document.getByTagName上缺少一个括号。
第一次调用时，你的函数没有“睡眠/超时”，在调用函数时立即改变背景图像。
还要注意，当你setTimeout()重复它的功能时，第二个参数实际上是毫秒，而不是像你想要的那样。
您的函数只会修改<body>两次，因为imageID不断增加，并且只有非设置的情况（应该真正检查imageID==0）和1.您需要更改它，因此每个背景都有旋转的情况。
document.getTagByName("body").src不是更改背景图片的正确方法。 document.body.style.backgroundImage是。

更改页面间隔的正文背景

2 个答案: