• Défilé d'images.

    J'ai trouvé un site qui expliquait un montage que j'utilise en commande manuel mais qu'on peut modifier en défilement automatique; alors, voici ma contribution.
    Par principe, je préfère que le visiteur affiche les images à son gré mais on peut ajouter un arrêt au survol, comme ici, pour avoir le temps de bien regarder une image particulière.
    Le temps du cycle est facile à modifier puisque le code calcule en % et donc l'affichage de chaque image, aussi.

    Code.

    <div style="width: 800px; height: 600px; border: 4px ridge white; margin: 10px auto; overflow: hidden;">
    <p id="def" style="width: 4010px; height: 600px;"><img style="width: 800px; height: 600px; float: left;" src="http://ekladata.com/WstPtNlnAfXl_XzOv_KrmI1hLz0/5641.jpg" alt="" /> <img style="width: 800px; height: 600px; float: left;" src="http://ekladata.com/S0b0l4kuNVbKQe7p97-YQj8MtiU/5642.jpg" alt="" /> <img style="width: 800px; height: 600px; float: left;" src="http://ekladata.com/sWillzZGoIlYIicjvSzX0-CLn4s/5643.jpg" alt="" /> <img style="width: 800px; height: 600px; float: left;" src="http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/octobre/05/DSCN5645.JPG" alt="" /> <img style="width: 800px; height: 600px; float: left;" src="http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/octobre/05/DSCN5646.JPG" alt="" /></p>
    </div>

    <style><!--
    #def{animation: anim 180s linear infinite alternate;
    animation-play-state: running;}
    #def:hover{animation-play-state: paused;}

    @keyframes anim {
    0% {transform:translate(0px,0px);}
    10% {transform:translate(0px,0px);}
    12% {transform:translate(-800px,0px);}
    35% {transform:translate(-800px,0px);}
    35% {transform:translate(-1600px,0px);}
    60% {transform:translate(-1600px,0px);}
    62% {transform:translate(-2400px,0px);}
    85% {transform:translate(-2400px,0px);}
    87% {transform:translate(-3200px,0px);}
    100% {transform:translate(-3200px,0px);}
    }
    --></style>



    La fenêtre d'affichage et de 800x600px et cache ce qui en dépasse (overflow:hidden;), en l'occurrence les images les unes à côté des autres: ici 5x800px = 4000px.
    Le paragraphe des images (id="def") est animé pour présenter chaque image avec une transition courte: vous pouvez remplacer mes adresses d'images par les vôtre.
    L'animation défile par défaut et s'arrête au survol.