• Exemple 190

    Exemple avec 12 images au ratio 16/9 et temps animation de 30 secondes: tout est ajustable à vos besoins.

    Il vous faudra calculer le temps d'affichage de chaque image + le temps de transition et la vitesse générale que vous souhaitez (ici, 30 secondes).

     

    <div style="width:800px; height:450px; margin:5px auto; border:1px solid black;">
    <p id="nim">&nbsp;</p>
    </div>
    <style><!--
    #nim{width:800px; height:450px; animation:conf 30s linear 0s infinite normal; animation-play-state:running;}
    #nim:hover{animation-play-state:paused;}
    @keyframes conf
    {
    0% {background:url('http://ekladata.com/ZPYVnFc6eLr2LKpLx7po-LMtRvA.jpg'); background-size:cover;}
    6.5% {background:url('http://ekladata.com/ZPYVnFc6eLr2LKpLx7po-LMtRvA.jpg'); background-size:cover;}

    8.5% {background:url('http://ekladata.com/HGTGGETCC-V_u6nzdKJVeS02Ufc.jpg'); background-size:cover;}
    15% {background:url('http://ekladata.com/HGTGGETCC-V_u6nzdKJVeS02Ufc.jpg'); background-size:cover;}

    17% {background:url('http://ekladata.com/DYwflVICEivh5NQJITPMdGfHM6Y.jpg'); background-size:cover;}
    23.5% {background:url('http://ekladata.com/DYwflVICEivh5NQJITPMdGfHM6Y.jpg'); background-size:cover;}

    25.5% {background:url('http://ekladata.com/zqLqTU3oSIfnvSZNCFb9BrVxZaw.jpg'); background-size:cover;}
    32% {background:url('http://ekladata.com/zqLqTU3oSIfnvSZNCFb9BrVxZaw.jpg'); background-size:cover;}

    34% {background:url('http://ekladata.com/TVCDZIaTtFAkhe0b4MEfO1uRvks.jpg'); background-size:cover;}
    40.5% {background:url('http://ekladata.com/TVCDZIaTtFAkhe0b4MEfO1uRvks.jpg'); background-size:cover;}

    42.5% {background:url('http://ekladata.com/SgJpG_s6QolzlmZxSMRclVCyMnE.jpg'); background-size:cover;}
    49% {background:url('http://ekladata.com/SgJpG_s6QolzlmZxSMRclVCyMnE.jpg'); background-size:cover;}

    51% {background:url('http://ekladata.com/-2O7ZsR2mhmQPdTYi63BkManHUM.jpg'); background-size:cover;}
    57.5% {background:url('http://ekladata.com/-2O7ZsR2mhmQPdTYi63BkManHUM.jpg'); background-size:cover;}

    59.5% {background:url('http://ekladata.com/uQO4D59uTJPkRXvcu82VrYV_LCI.jpg'); background-size:cover;}
    66% {background:url('http://ekladata.com/uQO4D59uTJPkRXvcu82VrYV_LCI.jpg'); background-size:cover;}

    68% {background:url('http://ekladata.com/NLoSJeXqmH1V6rXb15-bwu-XCLc.jpg'); background-size:cover;}
    74.5% {background:url('http://ekladata.com/NLoSJeXqmH1V6rXb15-bwu-XCLc.jpg'); background-size:cover;}

    76.5% {background:url('http://ekladata.com/cx91OfA6Juc5nOdCCKxA2EJak50.jpg'); background-size:cover;}
    83% {background:url('http://ekladata.com/cx91OfA6Juc5nOdCCKxA2EJak50.jpg'); background-size:cover;}

    85% {background:url('http://ekladata.com/oIvfROK0GyMNWfkiDCWD-UZXiMs.jpg'); background-size:cover;}
    91.5% {background:url('http://ekladata.com/oIvfROK0GyMNWfkiDCWD-UZXiMs.jpg'); background-size:cover;}

    93.5% {background:url('http://ekladata.com/Ktom6jY08eLucIeRwygD2J689tQ.jpg'); background-size:cover;}
    100% {background:url('http://ekladata.com/Ktom6jY08eLucIeRwygD2J689tQ.jpg'); background-size:cover;}

    }
    --></style>