Javascript 在CSS中更改背景颜色的JS幻灯片

我决定尝试使用CSS中的动画为背景创建幻灯片，并使用

Jquery

在Javascript中创建第二层

Javascript功能正常，但CSS背景不正确。下面是两者的代码。 Javascript代码是从W3Schools借来的

CSS:

Javascript:

var slideIndex = 0;
carousel();

function carousel() {
  var i = 0;
  var x = document.getElementsByClassName("a");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > x.length) {
    slideIndex = 1
  }
  x[slideIndex - 1].style.display = "block";
  setTimeout(carousel, 10000); // Change image every 2 seconds
}

var slideIndex=0；
转盘（）；
函数旋转木马（）{
var i=0；
var x=document.getElementsByClassName（“a”）；
对于（i=0；ix.length）{
slideIndex=1
}
x[slideIndex-1].style.display=“block”；
setTimeout（carousel，10000）；//每2秒更改一次图像
}

由于缺少HTML，我只能假设您想要什么，但问题在于CSS：

@keyframes change_color{
   {from (0%)}
   {to (100%)}
}

from-to关键帧是这样的（从（0%）{}到（100%）{}是自动的）：

这是一个很好的来源

这里有一些替代CSS

CSS:

body {
  background-color: black; /* whatever color you want */
  transition: background-color, 2s, ease-in-out, infinite;
}

---

使用，您可以使用JS更改样式以缓慢过渡到所需的颜色，只需更改元素的

背景色

，您就必须执行

元素.style.backgroundColor='red'

，它实际上不起作用

@keyframes change_color{
   from {
     background-color: red;
   }
   to {
     background-color: blue;
   }
}

body {
  background-color: black; /* whatever color you want */
  transition: background-color, 2s, ease-in-out, infinite;
}