Question

我一直在看这里如何做到这一点，我已经采取了一些想法，并将它们添加到我的代码中，但不知道为什么它不起作用，我已经尝试了一切（在我的脑海里）！

我正在寻找带有背景图像的div的头条，以便随着时间的推移改变图像！

所以这是我的HTML

<div id="headbar" onload="photoA()">

<div class="headbar-title">THE ALL NEW 14 RANGE</div>

<div class="button">FIND OUT MORE</div>

<script type="text/javascript">

  var imageCount = 1;
  var total = 6;
  window.setInterval(function photoA() {
  var headbar = document.getElementById('headbar');
  imageCount = imageCount + 1;
  if(imageCount > total){imageCount = 1;}   
  headbar.style.backgroundImage = "url('..img/img"+ imageCount +".JPG') no-repeat center center";
  }
  ,1000);
</script>

＆＃34;

这是我的css

#headbar {
  height: 50vh;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-top: 60px;
  display: flex;
  -webkit-flex-flow: column wrap;
  justify-content: center; 
  align-items: center;
  color: #eee;
}

任何帮助都将受到大力赞赏！现在一切都没有发生，只是一个白色的背景！

（顺便说一下，我没有使用过很多javascript，只使用了c）

谢谢，

奥利

Answer 1

我建议使用jQuery来代替硬编码你的javascript。这样的事情可能会很有效。

http://www.programming-free.com/2013/12/change-background-image-jquery.html

使用javascript随时间更改背景图像？

1 个答案: