Montage 42

Montage 42

Un type de montage que vous pouvez trouver en ligne; au clic sur un bouton, le paragraphe contenant les images (ici, 10 au ratio 16/9, dimensionnées dans le code en 1151x648px, mais on met le nombre souhaité) se déplace pour afficher l'image correspondante.

En cliquant sur chaque bouton dans l'ordre, la vitesse de translation est régulière mais si vous cliquez sur le premier puis le dernier, le chemin à parcourir sera plus long dans le même temps; je vais préparer une autre article, sur ce principe, avec une transition différente mais à vitesse régulière, quel que soit le bouton cliqué.

<div style="position: relative; box-sizing: border-box; width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.3vh ridge grey; overflow: hidden;"><input id="bt0" type="texte" value="clic" /><input id="bt1" class="bt" type="button" /><input id="bt2" class="bt" type="button" /><input id="bt3" class="bt" type="button" /><input id="bt4" class="bt" type="button" /><input id="bt5" class="bt" type="button" /><input id="bt6" class="bt" type="button" /><input id="bt7" class="bt" type="button" /><input id="bt8" class="bt" type="button" /><input id="bt9" class="bt" type="button" /><input id="bt10" class="bt" type="button" />
<p id="bdb"> </p>
<p id="diapo"><img src="http://ekladata.com/EOb-AtxErrAo3YXBztKtGoPpwmc@1151x648.jpg"><img src="http://ekladata.com/H83EA8JWT3QNmbDv5qQLZn2u08Y@1151x648.jpg"><img src="http://ekladata.com/kCPpQP0uXUm7muy7f5bCiF1o5ZI@1151x648.jpg"><img src="http://ekladata.com/dz-DDNT8lWipSLf3myhBGPkQ_QY@1151x648.jpg"><img src="http://ekladata.com/TkLdYpayXv3QPkNfmV5zR0EzykQ@1151x648.jpg"><img src="http://ekladata.com/1SZPJF2S4vmYFw-HbOVARs6U6rQ@1151x648.jpg"><img src="http://ekladata.com/6fbT4niqm2jaCFfI8h-MY0qowfI@1151x648.jpg"><img src="http://ekladata.com/gqXFJbvvMXuw64U1s_GWfdvIoQ8@1151x648.jpg"><img src="http://ekladata.com/rPDFGw7kRMPM3fMc8BlJbhKs0UA@1151x648.jpg"><img src="http://ekladata.com/5pIZkTx8dMDewFNyPSG6TLpUTIk@1151x648.jpg"></p>
</div>

<style></style>