每隔一定时间动态更改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秒更改一次图像，使用数组存储网址：

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);