Diaporama rando2

Voici le même montage que le précédent, avec coloration et arrêt au survol mais avec des images de 320x234px et sans bordure du montage.

Si l'on souhaite faire apparaître une bordure, on a le choix entre:

soit l'ajouter au niveau du montage général et donc d'en tenir compte dans la translation des images, 

soit mettre une bordure sur chaque image et la déplacer de sa largeur avec bordure.

<div id="mont">
<p id="def"><img class="nb" src="http://ekladata.com/3B8bgz0HxYufsg7cKAJBRZCBh0I/a1.jpg" alt="" /><img class="nb" src="http://ekladata.com/zolV1sNXWKc10idsoN_MhXTRPZQ/a2.jpg" alt="" /><img class="nb" src="http://ekladata.com/4OTcIiPWr0Yhkjm3V806owAO5is/a3.jpg" alt="" /><img class="nb" src="http://ekladata.com/0wZjwG5ihIOG170Oy1kazyySrXQ/a4.jpg" alt="" /><img class="nb" src="http://ekladata.com/T4GgRA0NdI5OFW80ptOKhCeyk8Q/a5.jpg" alt="" /><img class="nb" src="http://ekladata.com/T4GgRA0NdI5OFW80ptOKhCeyk8Q/a5.jpg" alt="" /><img class="nb" src="http://ekladata.com/NI7zRJIcy19D9WnZKZOVXA729SM/a6.jpg" alt="" /></p>
</div>

<style type="text/css"><!--
#mont{position:relative; width:320px; height:234px; margin:5px auto; overflow:hidden;}
#def{position:absolute; animation: rand 20s linear infinite; width:1920px; height:234px; display:inline-block; white-space:nowrap; animation-play-state:running;}
#def:hover{animation-play-state:paused;}
.nb{transition:all 1s linear; -webkit-filter:grayscale(100%); filter:grayscale(100%);}
.nb:hover{-webkit-filter:grayscale(0%); filter:grayscale(0%);}
@keyframes rand {
0% { transform:translate(0px,0px);}
14% { transform:translate(0px,0px);}
16% { transform:translate(-320px,0px);}
30% {transform:translate(-320px,0px);}
32% {transform:translate(-640px,0px);}
46% {transform:translate(-640px,0px);}
48% {transform:translate(-960px,0px);}
62% {transform:translate(-960px,0px);}
64% {transform:translate(-1280px,0px);}
78% {transform:translate(-1280px,0px);}
80% {transform:translate(-1600px,0px);}
94% {transform:translate(-1600px,0px);}
96% { transform:translate(-1920px,0px);}
100% {transform:translate(-1920px,0px);}
}
--></style>

L'animation tient compte du nombre d'images, de la durée d'affichage de chacune et du temps de chaque translation.

Dans mon exemple, avec 6 images + 1 pour le recouvrement et donc 6 translations, chaque image s'affiche pendant 14% du temps et la translation dure 2% du temps soit:

6x14% = 84%  +  6x2%=12% = 96% du temps.

Le 4% restant sont placés sur le recouvrement dernière image/première image (96% à 100%).

Ce calcul est à faire en fonction de vos choix: nombre d'images/temps d'affichage/temps de translation.