每隔一定时间动态改变 CSS DIV 背景

Question

我无法完成这项工作。我想每隔一定时间（每 7 秒左右）更改 div 的背景。我在 Whosebug 上搜索了更多答案，但找不到正确的解决方案。

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

每隔一定时间动态改变 CSS DIV 背景

Changing dynamically CSS DIV Background every certain time

html

css

jquery