Hinzufügen Fade-und Fadeout zu CSS und Java Diashow

Question

Ich fand und Diashow nur mit Java und CSS. Ich brauche das, weil ich auch Hintergrund Blend-Modus in meinem CSS-Skript verwenden, und das funktioniert nicht img src.

hier ist der Code:

http://jsfiddle.net/xdUBZ/749/

auch hier:

function run(interval, frames) { 
    var int = 1; 

    function func() { 
     document.body.id = "b"+int; 
     int++; 
     if(int === frames) { int = 1; } 
    } 

    var swap = window.setInterval(func, interval); 
} 

run(6000, 10); //milliseconds, frames 

Und das ist der Code CSS:

#b1 { background: hsl(10, 50%, 50%); } 
#b2 { background: hsl(30, 50%, 50%); } 
#b3 { background: hsl(60, 50%, 50%); } 
#b4 { background: hsl(90, 50%, 50%); } 
#b5 { background: hsl(120, 50%, 50%); } 
#b6 { background: hsl(150, 50%, 50%); } 
#b7 { background: hsl(180, 50%, 50%); } 
#b8 { background: hsl(210, 50%, 50%); } 
#b9 { background: hsl(240, 50%, 50%); } 
#b10 { background: hsl(270, 50%, 50%); } 

Gibt es eine Möglichkeit FadeIn hinzuzufügen und Ausblendeffekt? Auch ich bemerkte, dass Sie die Zeit in Millisekunden ändern können. In den ersten Millisekunden wird kein Bild geladen, nachdem die Millisekunden für die letzte Zeit beendet sind, als das erste Bild geladen wird. Gibt es einen Weg, um mit dem ersten Bild zu kommen sofort

Mit freundlichen Grüßen, Justin

Answer 1

Wenn Sie hinzufügen

body { 
    transition-duration: 1s; 
} 

Dann werden die Farben ineinander verblassen. Wenn Sie Bilder verwenden, dann werden sie verblassen in-out