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

【问题标题】：Change 'background-image' in 'body' tag after specific time interval在特定时间间隔后更改“body”标签中的“background-image”
【发布时间】：2017-04-16 17:58:25
【问题描述】：

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>

【问题讨论】：

How to change background on every 5s 可能重复您需要将10000 更改为5000。
@yuriy636，我确实检查了切换背景图像，没有点击，即按时间间隔并且无法找到它。因此不得不发布这个问题。如果有任何这样的问题，我跳过了，我很抱歉。丹尼尔解决了这个问题。

标签： javascript html css

【解决方案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);

});

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

是的@DanielH，您的回答非常完美。
一切正常，但最后有 5 秒的空白图像。你能帮忙吗？我正在尝试找出解决方案，但现在正在解决。
@DhavalJardosh 你是对的，我发现了问题。就是这一行：cout == urls.length-1 ? cout = 0 : cout++; 具有 4 个 url 的数组的长度为 4，但索引为 0、1、2、3。所以我们需要把 length-1 来匹配最后一个 urls 索引，即 3
这简直太棒了！

【解决方案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
  }
}

【讨论】：

@DhavalJardosh 我用无限动画更新了 sn-p（并且降低了 bg 的质量，lorempixel 有时很慢）
太棒了！我正在处理图像的平滑过渡。这个方法很简单。
@DhavalJardosh 如果你打算淡化 bg，你可能想看看这个 codepen codepen.io/gcyrillus/pen/DJdja 它使用动画和伪元素来做淡化。这是一个已有 4 年历史的演示，但对于 bg 中的 CSS 褪色效果，此时仍然是最新的。您可以为伪动画重新制作动画，以包含额外的图像，也可以将图像添加到主体。需要调整时间，以便图像发生变化，元素不可见。 codepen.io/gc-nomade/pen/rmOVJM

【解决方案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;}
    }
});

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案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>

【讨论】：