如何达到这种效果，JavaScript代码有什么问题？

Question

我正在尝试实现这种背景效果，该效果会改变相似的背景，结果是出现毛刺的老式电视效果，可以在此页面上看到。

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

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

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

和..您反加无限期..

Answer 2

您应该使用CSS3动画而不是JavaScript计时器。 在这里查看示例。

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

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

Answer 4

@Andrej Tomas- 在这里看看，我正在使用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);}
}