Diapo 4

 Un diaporama avec arrêt du défilement au survol.

Exemple avec 7 images, au ratio 16/9, en 800x450px.

<div style="position: relative; width: 800px; height: 450px; margin: 30px auto; border: 1px solid black; overflow: hidden;">
<p id="anim"><img src="http://ekladata.com/Am8oOchuOSj-1AhaGPApfIgfIAU@800x450.jpg" alt="" /><img src="http://ekladata.com/Md9BeJKkrhS5GYG1VLAF_lg_Gpo@800x450.jpg" alt="" /><img src="http://ekladata.com/2vm7-43L7_AoyIALeiYzoyLfOxw@800x450.jpg" alt="" /><img src="http://ekladata.com/7YxvwjKcZ3cstyR6i4e27vpEMlY@800x450.jpg" alt="" /><img src="http://ekladata.com/OUUQRdZzksFO32t4f_B0F9u_rEc@800x450.jpg" alt="" /><img src="http://ekladata.com/S3Gef3yEfdnpgKXst0IcUFd_KE8@800x450.jpg" alt="" /><img src="http://ekladata.com/0O05BA4dwOJBUighOIN2xseE6f8@800x450.jpg" alt="" /></p>
</div>
<style><!--
#anim{display: inline-block; width:5600px; height:450px; text-align:left; animation:lin 20s 0s linear infinite alternate; animation-play-state:running;}
#anim:hover{animation-play-state:paused;}
@keyframes lin{
0%{transform:translate(0px,0px);}
10%{transform:translate(0px,0px);}
15%{transform:translate(-800px,0px);}
25%{transform:translate(-800px,0px);}
30%{transform:translate(-1600px,0px);}
40%{transform:translate(-1600px,0px);}
45%{transform:translate(-2400px,0px);}
55%{transform:translate(-2400px,0px);}
60%{transform:translate(-3200px,0px);}
70%{transform:translate(-3200px,0px);}
75%{transform:translate(-4000px,0px);}
85%{transform:translate(-4000px,0px);}
90%{transform:translate(-4800px,0px);}
100%{transform:translate(-4800px,0px);}
--></style>