CSSの背景色が変更されたJSスライドショー

Question

背景のCSSのアニメーションを使用して、JavaScriptの2番目のレイヤーがJqueryのスライドショーを作成しようとしました。

JavaScriptが正しく機能していますが、CSSの背景が正しくありません。ここには両方のコードがあります。 W3SchoolのAutomatic Slideshow exampleからJavascriptコードを借用しました。

CSS：

body { 
    animation-name: change_color; animation-duration: 10s; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite; 
} 
@keyframes change_color { 
    { from (0%) } 
    { to (100%) } 
} 

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 
} 

Answer 1

まあ、私はあなたがHTMLの欠如に起因する欲しいものと想定することができますが、問題は、CSSにある：

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

from-toキーフレームは次のようになります（from(0%){} to(100%){}は自動です）：

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

keyframes documentationは素晴らしいソースです。

ここにいくつかの代替CSSがあります。

CSS：transitionsを使用して

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

、あなただけの要素のbackground-color、あなたがelement.style.backgroundColor='red'を行う必要があるでしょうを変更、ゆっくり希望の色に移行するスタイルを変更するJSを使用することができます。