Javascript 改变'；背景图像'；在'；车身'；特定时间间隔后的标记

假设“image1.jpg，image2.jpg…”，如何更改背景图像 5秒后

在StackOverflow上找到用于更改图像的此脚本，但我还需要在几秒钟后更改它，并且无需单击

body{
    background-image: "image.jpg";
    }

$（文档）.ready（函数（）{
$（'body'）.css（'background-image'，'url（'image2.jpg'））；
});

你的意思是这样的吗。您可以用图像路径填充颜色数组

var计数器=0；
变量颜色=[“红色”、“绿色”、“蓝色”]；
$（函数（）{
改变（）；
函数更改（）{
设置超时（更改，5000）；
$（'body'）.css（'background-color'，colors[counter]）；
计数器++；
如果（计数器==3）{counter=0；}
}
});

将URL或img路径放入数组中，它将在每个图像中循环。从第一个开始

如果需要，请使用
setInterval
，使其永远运行。（setTimeout将在每次调用中运行一次）


$（文档）.ready（函数（）{
var url=['https://pp.userapi.com/c629327/v629327473/db66/r051joYFRX0.jpg', 'https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg', 'https://img.wikinut.com/img/gycf69_-6rv_5fol/jpeg/0/Best-Friends-Img-Src:Image:-FreeDigitalPhotos.net.jpeg'，'http://www.travelettes.net/wp-content/uploads/2014/03/IMG_3829-Medium-600x400.jpg'];
var-cout=1；
$（'body'）.css（'background-image'，'url（'+url[0]+'））；
setInterval（函数（）{
$（'body'）.css（'background-image'，'url（'+url[cout]+'））；
cout==url.length-1？cout=0:cout++；
}, 5000);
});
您还可以使用CSS动画：


正文{
背景：url(http://lorempixel.com/400/400/people/1);
动画：chbg 15s无限交替；
背景尺寸：封面
}
@关键帧chbg{
0% {
背景：url(http://lorempixel.com/100/100/people/1);
背景尺寸：封面
}
20% {
背景：url(http://lorempixel.com/100/100/people/7);
背景尺寸：封面
}
40% {
背景：url(http://lorempixel.com/100/100/people/6);
背景尺寸：封面
}
60% {
背景：url(http://lorempixel.com/100/100/people/2);
背景尺寸：封面
}
80% {
背景：url(http://lorempixel.com/100/100/people/9);
背景尺寸：封面
}
100% {
背景：url(http://lorempixel.com/100/100/people/8);
背景尺寸：封面
}
}
简单的方法是使用函数运行代码进行检查


函数运行（间隔、帧）{
var int=1；
函数func（）{
document.body.id=“b”+int；
int++；
如果（int==帧）{int=1；}
}
var swap=window.setInterval（func，interval）；
}
跑（1000，10）//毫秒，帧
#b1{背景：hsl（0,50%，50%）}
#b2{背景：hsl（30,50%，50%）；}
#b3{背景：hsl（60,50%，50%）；}
#b4{背景：hsl（90,50%，50%）；}
#b5{背景：hsl（120,50%，50%）；}
#b6{背景：hsl（150,50%，50%）；}
#b7{背景：hsl（180,50%，50%）；}
#b8{背景：hsl（210,50%，50%）；}
#b9{背景：hsl（240,50%，50%）；}
#b10{背景：hsl（270,50%，50%）；}

您可能需要将
10000
更改为
5000
。@yuriy636，我确实检查了切换背景图像，没有按时间间隔单击，因此无法找到它。因此，我不得不提出这个问题。如果有任何这样的问题，我跳过了，我道歉。丹尼尔解决了这个问题。是的@DanielH，你的答案非常完美。一切正常，但最后有一个空白图像持续5秒。你能帮忙吗？我正试图找出解决办法，但现在正在解决。@DhavalJardosh你是对的，我发现了问题。这是一行：
cout==url.length-1？cout=0:cout++
具有4个URL的数组的长度为4，但索引为0,1,2,3。因此，我们需要将length-1与最后一个URL索引匹配，即3，这太完美了@DhavalJardosh i用无限动画更新了片段（并且bg质量下降，lorempixel有时速度较慢），这太棒了！我正在研究图像的平滑过渡。这个方法很简单。@DhavalJardosh如果你计划淡入背景，你可能想看看这个代码笔，它使用动画和伪元素来淡入。这是一个有4年历史的演示，但目前对于bg中的CSS衰减效果仍然是最新的。您可以为伪对象重新制作动画，以便包含额外的图像，也可以将图像添加到实体中。时间将需要调整，以便图像被更改，元素将不可见。
<script type="text/javascript">
$(document).ready(function() {
    $('body').css('background-image', 'url("image2.jpg")');
});
</script>