Mont.7.4.23

Images déjà publiées, désolé !

1+8 images, au ratio 16/9, en 1000x563px, commandées par un Clic sur chaque bouton, de préférence dans l'ordre.

<div style="position: relative; overflow: hidden; width: 1000px; height: 563px; margin: 30px auto; text-align: left; border: 1px solid black;">
<input id="cd0" class="cd" type="text" value="0" />
<input id="cd1" class="cd" type="text" value="1" />
<input id="cd2" class="cd" type="text" value="2" />
<input id="cd3" class="cd" type="text" value="3" />
<input id="cd4" class="cd" type="text" value="4" />
<input id="cd5" class="cd" type="text" value="5" />
<input id="cd6" class="cd" type="text" value="6" />
<input id="cd7" class="cd" type="text" value="7" />
<input id="cd8" class="cd" type="text" value="8" />
<img id="liv0" class="liv" src="http://ekladata.com/LmUCz8z3jxWZw7q8Ng2Krl2OSao.jpg" alt="" />
<img id="liv1" class="liv" src="http://ekladata.com/G4uf0I8B6tam0uzAsZbTel8S8ZM.jpg" alt="" />
<img id="liv2" class="liv" src="http://ekladata.com/fTwPPWmq0EzglOY9FMVwhq95SDM.jpg" alt="" />
<img id="liv3" class="liv" src="http://ekladata.com/Eii__TNwNq6tlAYdNPzVIiiQotE.jpg" alt="" />
<img id="liv4" class="liv" src="http://ekladata.com/zqIyL85SJ-oPSkTFKihyuCPgWoQ.jpg" alt="" />
<img id="liv5" class="liv" src="http://ekladata.com/AqfU4lN5yAcbC7iJztSxHTXKnZc.jpg" alt="" />
<img id="liv6" class="liv" src="http://ekladata.com/vaae-y8qlt4c9Q46bASLellET2w.jpg" alt="" />
<img id="liv7" class="liv" src="http://ekladata.com/gBH10-rtDS-aZwxUUAipJoD5luc.jpg" alt="" />
<img id="liv8" class="liv" src="http://ekladata.com/YSw4M82O_-ZwFMto3bmHjXBrdrM.jpg" alt="" />
</div>

<style><!--
.cd{position:absolute; z-index:10; width:30px; height:30px; text-align:center; line-height:30px; font-size:30px; font-weight:bold; border-radius:15px;}
#cd0{transform:translate(300px,0px);}
#cd1{transform:translate(350px,0px);}
#cd2{transform:translate(400px,0px);}
#cd3{transform:translate(450px,0px);}
#cd4{transform:translate(500px,0px);}
#cd5{transform:translate(550px,0px);}
#cd6{transform:translate(600px,0px);}
#cd7{transform:translate(650px,0px);}
#cd8{transform:translate(700px,0px);}
.liv{position:absolute; width:1000px; height:563px; transition:all 1s;}
#liv0{z-index:1; transform:translate(0px,0px);}
#liv1{z-index:3; transform:translate(1000px,0px);}
#liv2{z-index:3; transform:translate(-1000px,0px);}
#liv3{z-index:3; transform:translate(1000px,0px);}
#liv4{z-index:3; transform:translate(-1000px,0px);}
#liv5{z-index:3; transform:translate(1000px,0px);}
#liv6{z-index:3; transform:translate(-1000px,0px);}
#liv7{z-index:3; transform:translate(1000px,0px);}
#liv8{z-index:3; transform:translate(-1000px,0px);}
.cd:focus{background:lime;}
#cd1:focus ~ #liv1,#cd2:focus ~ #liv2,#cd3:focus ~ #liv3,#cd4:focus ~ #liv4,#cd5:focus ~ #liv5,#cd6:focus ~ #liv6,#cd7:focus ~ #liv7,#cd8:focus ~ #liv8{transform:translate(0px,0px);}
--></style>