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

Question

我正在尝试实现这种背景效果，它改变了相似的背景，结果是像老电视一样的故障效果，可以在 this page.

上看到

在 css 文件中，我有：noise-bck--1、noise-bck--2、noise-bck--3 具有不同的背景，在 JavaScript 中，我试图遍历它们使用 setInterval 但出了点问题。

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

bg1.png

bg2.png

bg3.png

这是我的代码片段：

(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');
}

<div class="noise-bck"></div>

Answer 1

在您的代码段中，查询选择器正在查找名为 noice-bck

的标签

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

尝试更改查询选择器以查找带有 class noice-bck 的元素。

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

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

Answer 2

您应该使用 CSS3 动画而不是 javascript 计时器。请参阅示例 here。

Answer 3

你的错误是结构性的。 document.querySelector('noise-bck') select 是第一个 <noise-bck> 元素，它不是有效元素。您可能打算 select 具有 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');
}

<div class="noise-bck"></div>

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

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

How do I achieve this effect and what is wrong with my JavaScript code?

javascript

effects

background-image

setinterval