• Montage 43

    Même montage que le 42 mais avec une transition différente.


    <div style="position: relative; box-sizing: border-box; width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.3vh ridge grey; overflow: hidden;">
    <p id="diapo"><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" /> <img id="lon1" src="http://ekladata.com/cqsYEiaM2RoxKwGnCngulvGl08o@1151x648.jpg" alt="" /><img id="lon2" src="http://ekladata.com/ZV7c4Tapn59FIYcQL1EZrQGuLeE@1151x648.jpg" alt="" /><img id="lon3" src="http://ekladata.com/5p-lMtgwP-NZCqtaBpuKrUthqBY@1151x648.jpg" alt="" /><img id="lon4" src="http://ekladata.com/YgDF7kwtOvP8DDVQlzdXe1FVYsQ@1151x648.jpg" alt="" /><img id="lon5" src="http://ekladata.com/kKE-CVQu-oYdB2viRAsQDkCFCCY@1151x648.jpg" alt="" /><img id="lon6" src="http://ekladata.com/E0NaOBry2Pc3BNGGbQGyJjUGAP4@1151x648.jpg" alt="" /><img id="lon7" src="http://ekladata.com/o4MF_O71qjIw8MSrADQ4e9OXOvY@1151x648.jpg" alt="" /><img id="lon8" src="http://ekladata.com/xt_WebeAkVLkiTvuP4iRjGohviE@1151x648.jpg" alt="" /><img id="lon9" src="http://ekladata.com/xBMBIaNJ5Lq79aPxGAwKeuML3oM@1151x648.jpg" alt="" /><img id="lon10" src="http://ekladata.com/_qJXgOxwavvTJzT47Wd-jHZw4R8@1151x648.jpg" alt="" /></p>
    </div>
    <style><!--
    #diapo{position:absolute; z-index:2; width:180vw; height:33.75vw; transform:translate(-60vw,0vw);}
    #bt0{position:absolute; z-index:5; width:2vw; height:1vw; border:0.1vh solid white; background:rgba(0,0,0,0.5); text-align:center; font-size:1vw; color:white!important; text-shadow:0.1vh 0.1vh black;transform:translate(60vw,32.25vw);}
    .bt{position:absolute; z-index:15; width:0.4vw; height:1vw; border-radius:50%; background:bisque!important;}
    #bt1{transform:translate(64vw,32.25vw);}
    #bt2{transform:translate(67vw,32.25vw);}
    #bt3{transform:translate(70vw,32.25vw);}
    #bt4{transform:translate(73vw,32.25vw);}
    #bt5{transform:translate(76vw,32.25vw);}
    #bt6{transform:translate(79vw,32.25vw);}
    #bt7{transform:translate(82vw,32.25vw);}
    #bt8{transform:translate(85vw,32.25vw);}
    #bt9{transform:translate(88vw,32.25vw);}
    #bt10{transform:translate(91vw,32.25vw);}

    #lon1{position:absolute; z-index:1; width:60vw; height:33.75vw; transform:translate(60vw,0vw);}
    #lon2,#lon4,#lon6,#lon8,#lon10{position:absolute; z-index:1; width:60vw; height:33.75vw; transform:translate(0vw,0vw);transition:all 1s linear;}
    #lon3,#lon5,#lon7,#lon9{position:absolute; z-index:1; width:60vw; height:33.75vw; transform:translate(120vw,0vw);transition:all 1s linear;}

    .bt:focus{background:lime!important;}
    #bt2:focus ~ #lon2,#bt3:focus ~ #lon3,#bt4:focus ~ #lon4,#bt5:focus ~ #lon5,#bt6:focus ~ #lon6,#bt7:focus ~ #lon7,#bt8:focus ~ #lon8,#bt9:focus ~ #lon9,#bt10:focus ~ #lon10{z-index:3;transform:translate(60vw,0vw);}
    --></style>