如何实现这种效果以及我的 JavaScript 代码有什么问题？答案

【问题标题】：How do I achieve this effect and what is wrong with my JavaScript code?如何实现这种效果以及我的 JavaScript 代码有什么问题？
【发布时间】：2017-01-27 05:53:59
【问题描述】：

我正在尝试实现这种背景效果，它改变了相似的背景，结果是故障，类似旧电视的效果，可以在this page上看到。

在 css 文件中，我有：noise-bck--1,noise-bck--2,noise-bck--3，它们有不同的背景，在 JavaScript 中我尝试用 setInterval 循环它们，但出了点问题。

效果图可以在这些链接上找到，请下载：

bg1.png

bg2.png

bg3.png

这是我的 sn-p：

(function() {
  var frontBck = document.querySelector('.noise-bck');
  var count = 0;
  var i;
  i = setInterval(update, 100);

  function update() {
    frontBck.classList.remove('noise-bck--1');
    frontBck.classList.remove('noise-bck--2');
    frontBck.classList.remove('noise-bck--3');
    count++;
    frontBck.classList.add('noise-bck--' + count);
    if (count == 4) {
      count = 1;
    }


  }

}());

body {
  margin: 0;
  padding: 0;
  font-size: 100%;
}
.noise-bck {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.noise-bck--1 {
  background-image: url('bg1.png');
}
.noise-bck--2 {
  background-image: url('bg2.png');
}
.noise-bck--3 {
  background-image: url('bg3.png');
}

&lt;div class="noise-bck"&gt;&lt;/div&gt;

【问题讨论】：

当计数达到 4 时，您需要将其设置回 1
function update() { frontBck.classList.remove('noise-bck--'+count); count++; if (count>3) count=1; frontBck.classList.add('noise-bck--' + count); }

标签： javascript background-image setinterval effects

【解决方案1】：

在您的 sn-p 中，查询选择器正在寻找一个名为 noice-bck 的标签

var frontBck = document.querySelector('noice-bck');

尝试更改查询选择器以查找类为 noice-bck 的元素。

var frontBck = document.querySelector('.noice-bck');

而且..你的计数器会无限增加..

【讨论】：

你怎么知道那不是故意的？可能就像“nice back”的街道...不错.. noice... noice back... noice-bck ;)

【解决方案2】：

您应该使用 CSS3 动画而不是 javascript 计时器。查看示例here。

【讨论】：

更多 documentation 为您提供 css3 动画
来自您的第一个链接：Background image isn't a property that can be animated - you can't tween the property.
它不是动画图像，重点是循环它们。

【解决方案3】：

你的错误是结构性的。 document.querySelector('noise-bck') 选择第一个 <noise-bck> 元素，该元素不是有效元素。您可能打算使用class="noise-bck" 选择元素（通过document.querySelector('.noise-bck')。最好单独编写setInterval() 函数而不是在变量中。这是更正的代码（注意我使用了body 元素而不是你正在寻找使用document.querySelector()。

(function() {
  var frontBck = document.querySelector('.noise-bck');
  var count = 0;
  setInterval(update(), 100);

  function update() {
    frontBck.classList.remove('noise-bck--1');
    frontBck.classList.remove('noise-bck--2');
    frontBck.classList.remove('noise-bck--3');
    count++;
    frontBck.classList.add('noise-bck--' + count);


  }

}());

body {
  margin: 0;
  padding: 0;
  font-size: 100%;
}
.noise-bck {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.noise-bck--1 {
  background-image: url('bg1.png');
}
.noise-bck--2 {
  background-image: url('bg2.png');
}
.noise-bck--3 {
  background-image: url('bg3.png');
}

&lt;div class="noise-bck"&gt;&lt;/div&gt;

【讨论】：

【解决方案4】：

@Andrej Tomas - 看看here，我正在使用 CSS3 动画循环背景图像。

@-webkit-keyframes example {
0%   {background-image: url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png);}
25%  {background-image: url(https://s-media-cache-ak0.pinimg.com/736x/9b/a2/57/9ba25796112cad616be27e473ae1e149.jpg);}
50%  {background-image: url(https://s-media-cache-ak0.pinimg.com/736x/ce/5f/53/ce5f53437e291c48705428721406985c.jpg);}
100% {background-image: url(http://static.zikvid.com/crop/-/480/uploads/apps/games/560c672ea57e1f2dead096834d82a1db.jpg);}
}

【讨论】：