在特定时间间隔后更改“body”标签中的“background-image”

Question

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

假设 'image1.jpg,image2.jpg...' 5 秒后如何更改背景图像。

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

<script type="text/javascript">
$(document).ready(function() {
    $('body').css('background-image', 'url("image2.jpg")');
});
</script>

Answer 1

将您的 urls 或 img 路径放在数组中，它将遍历每个图像。 从第一个开始。
如果您需要它永远运行，请使用setInterval 。 （每次调用 setTimeout 将运行一次）

 $(document).ready(function() { var urls = ['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("' + urls[0] + '")'); setInterval(function() { $('body').css('background-image', 'url("' + urls[cout] + '")'); cout == urls.length-1 ? cout = 0 : cout++; }, 5000); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Answer 2

您还可以使用 CSS 动画：

 body { background:url(http://lorempixel.com/400/400/people/1); animation: chbg 15s infinite alternate; background-size:cover } @keyframes chbg { 0% { background:url(http://lorempixel.com/100/100/people/1); background-size:cover } 20% { background:url(http://lorempixel.com/100/100/people/7); background-size:cover } 40% { background:url(http://lorempixel.com/100/100/people/6); background-size:cover } 60% { background:url(http://lorempixel.com/100/100/people/2); background-size:cover } 80% { background:url(http://lorempixel.com/100/100/people/9); background-size:cover } 100% { background:url(http://lorempixel.com/100/100/people/8); background-size:cover } }

Answer 3

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

 var counter=0; var colours=["red","green","blue"]; $(function() { change(); function change() { setTimeout(change,5000); $('body').css('background-color', colours[counter] ); counter++; if(counter==3){ counter=0;} } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 4

简单的方法是用函数运行代码来检查

 function run(interval, frames) { var int = 1; function func() { document.body.id = "b"+int; int++; if(int === frames) { int = 1; } } var swap = window.setInterval(func, interval); } run(1000, 10); //milliseconds, frames

 #b1 { background: hsl(0, 50%, 50%); } #b2 { background: hsl(30, 50%, 50%); } #b3 { background: hsl(60, 50%, 50%); } #b4 { background: hsl(90, 50%, 50%); } #b5 { background: hsl(120, 50%, 50%); } #b6 { background: hsl(150, 50%, 50%); } #b7 { background: hsl(180, 50%, 50%); } #b8 { background: hsl(210, 50%, 50%); } #b9 { background: hsl(240, 50%, 50%); } #b10 { background: hsl(270, 50%, 50%); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <html> <body> <body> </html>

在特定时间间隔后更改“body”标签中的“background-image”

问题描述

4 个解决方案

解决方案1
6 已采纳 2017-04-16 18:43:37

解决方案2
5 2017-04-16 18:56:28

解决方案3
1 2017-04-16 18:08:42

解决方案4
0 2021-01-25 07:54:10

在特定时间间隔后更改“body”标签中的“background-image”

问题描述

4 个解决方案

解决方案1 6 已采纳 2017-04-16 18:43:37

解决方案2 5 2017-04-16 18:56:28

解决方案3 1 2017-04-16 18:08:42

解决方案4 0 2021-01-25 07:54:10

解决方案1
6 已采纳 2017-04-16 18:43:37

解决方案2
5 2017-04-16 18:56:28

解决方案3
1 2017-04-16 18:08:42

解决方案4
0 2021-01-25 07:54:10