Ajouter fadein et fadeout à diaporama css et java

Question

J'ai trouvé et diaporama en utilisant java et css seulement. J'ai besoin de ça car j'utilise aussi le mode fondu dans mon script css et ça ne marche pas sur img src.

Voici le code:

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

aussi ici:

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 

Et ceci est le 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%); } 

Y at-il un moyen d'ajouter fadein et effet de fondu? Aussi, j'ai remarqué que vous pouvez changer l'heure en millisecondes. Les premières millisecondes, aucune image n'est chargée après la fin des millisecondes pour la première fois que la première image sera chargée. Est-il possible de trouver la première image instantanément

Meilleures salutations, Justin

Answer 1

Si vous ajoutez

body { 
    transition-duration: 1s; 
} 

Ensuite, les couleurs se fondre dans l'autre. Si vous utilisez des images, ils vont disparaître en dehors