Question

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

如何更改背景图片，假设'image1.jpg，image2.jpg ......' 5s后。

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

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

Answer 1

将你的url或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

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

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 3

你也可以使用CSS动画：

＆＃13;

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
  }
}

＆＃13;

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 个答案: