更改页面间隔的主体背景 [英] Change body background of page interval
问题描述
我目前有：
< script type ='text / javascript'>
var imageID = 0;
函数changeimage（every_seconds）{
//改变图像
if（！imageID）{
document.getByTagName（body）。src =icwXI.jpg;
imageID ++;
}
else {if（imageID == 1）{
document.getByTagNamebody）。src =JvuP9.jpg;
imageID ++;
//再次调用相同的函数x秒秒
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，然后转换为JvuP9.jpg 20秒后，再循环回到icwXI.jpg，再过2秒钟。
然而，它似乎并不奏效，我的JavaScript技巧相当有限。 p>
谢谢。
创建一个背景图片数组 - 用一些placekitten图像做了这个。其次，创建一个函数，将数组中的下一个变为背景。为了跟踪我们的位置，我们将使用一个变量（我们可以在新的浏览器上使用 .indexOf 数组，虽然在某些领域支持很弱）。
最后，我们将创建一个每23秒运行一次的时间间隔。运行时调用我们的swapBG函数，然后立即创建一个超时，在2秒后再次调用swapBG函数。
// backImg用于跟踪我们显示的图像// dbStyle是对主体样式列表的快速引用
// backgnd是潜在背景图像的数组
var backImg = -1，
dbStyle = document.body.style，
backgnd = [
'url（http://placekitten.com/350/350）'，
'url http://placekitten.com/349/349）'
];
//通过背景图像前进，然后回到开始
//当它到达列表的末尾时
function swapBG（）{
dbStyle.backgroundImage = backgnd [backImg ++]
？ backgnd [backImg]
：backgnd [backImg = 0];
}
//立即调用swapBG（）
swapBG（）;
//创建一个每23秒运行一次的时间间隔
setInterval（function（）{
swapBG（）;
//创建超时后运行2秒
setTimeout（function（）{
swapBG（）
}，2000）;
}，23000）;
演示： http://jsfiddle.net/XsAWB / 2 /
I currently have:
<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)'>
The aim is to have the body background image load icwXI.jpg initially and then change to JvuP9.jpg 20 seconds later, then cycle back to icwXI.jpg another 2 seconds later.
However it does not seem to be working, my skills with JavaScript is pretty limited.
Thank you.
Create an array of background images - below I have done this with some placekitten images. Secondly, create a function that changes the background out with the next in the array. For tracking our location, we'll use a variable (we could use the .indexOf on arrays in newer browsers, though support is weak in some areas).
Lastly, we'll create an interval that runs every 23 seconds. When it runs it calls our swapBG function, and then immediately creates a timeout that will call our swapBG function again after 2 seconds.
// 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);
Demo: http://jsfiddle.net/XsAWB/2/
这篇关于更改页面间隔的主体背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
