每隔一段时间动态更改CSS DIV背景[重复]

Question

我看不出来让这个工作。我想每隔一定时间（每 7 秒左右）更改 div 的背景。我在 StackOverflow 上搜索了更多答案，但找不到正确的解决方案。

<div id="head">
content
</div>

CSS 代码：

#head{
background:#181015 url( ../images/bg_header.jpg) no-repeat; 
background-size: cover;
min-height:520px; 
}

我很确定它是使用 Javascript / jQuery。

Answer 1

您可以使用setInterval 函数每 X 秒更改一次图像并使用数组来存储 url：

HTML

<div id="head">
 content
</div>

CSS

#head {
  background:#181015 url( ../images/bg_header.jpg) no-repeat; 
  background-size: cover;
  min-height:520px; 
}

JS

var head = document.getElementById('head'),
images = ['img1.jpg', 'img2.jpg', 'img3.jpg'],
i = 0;

setInterval(function(){

  if (i === images.length) i = 0;

  head.style.background = '#181015 url( ../images/' + images[i] + ') no-repeat';

  i++;

}, 3000);