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

时间:2015-01-06 00:12:38

标签: jquery html css

我无法做到这一点。我想每隔一段时间(每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。

1 个答案:

答案 0 :(得分:0)

您可以使用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);