Code d'un défilement sur une seule vidéo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Base minimum adaptateur presentation powerpoint</title>
<script>
var persistanceretinienne = 5;
var nbimg = null;
var nbboucle = 70;
var mua1 = 0;
var vitesseDuVent = 2020;
var ouioui;
var joueur = 'fleur';
var joueur1;
var joueur2;
var version = 1;
var joueur3 = 'bisfleur';
var joueur4;
var joueur5 = 'bis';
var joueur7;
var joueur8;
function acelereLeVent(){
if(vitesseDuVent>123){
clearInterval(nbimg);
vitesseDuVent = vitesseDuVent -40;
nbboucle = 70;
lancertout();
}
}
function diminuLeVent(){
clearInterval(nbimg);
vitesseDuVent = vitesseDuVent + 300;
nbboucle = 70;
lancertout();
}
function decoupe2(joueur4){//1
document.getElementById(joueur4).className = 'cachemoi';
}//3
function decoupe1(joueur2){//1
document.getElementById(joueur2).className = 'cachemoi';
}//3
function decoupe3(joueur1){//1
document.getElementById(joueur1).className = 'sortdutrou';
}//3
function restecalme(joueur1,joueur8,ouioui){//1
if(version == 1){//2
for (var placier = 1; placier < ouioui; placier++) {//3
joueur2 = joueur + placier;
document.getElementById(joueur2).className = 'cachemoi';
}//3
for (var placier = ouioui+1; placier < 7; placier++) {//3
joueur2 = joueur + placier;
document.getElementById(joueur2).className = 'cachemoi';
}//3
for (var placier = 1; placier < ouioui; placier++) {//3
joueur4 = joueur3 + placier;
document.getElementById(joueur4).className = 'cachemoi';
}//3
for (var placier = ouioui+1; placier < 7; placier++) {//3
joueur4 = joueur3 + placier;
document.getElementById(joueur4).className = 'cachemoi';
}//3
document.getElementById(joueur1).className = 'sortdutrou';
document.getElementById(joueur8).className = 'cachemoi';
}//2
if(version == 2){//2
for (var placier = 1; placier < ouioui; placier++) {//3
joueur4 = joueur3 + placier;
document.getElementById(joueur4).className = 'cachemoi';
}//3
for (var placier = ouioui+1; placier < 7; placier++) {//3
joueur4 = joueur3 + placier;
document.getElementById(joueur4).className = 'cachemoi';
}//3
for (var placier = 1; placier < ouioui; placier++) {//3
joueur2 = joueur + placier;
document.getElementById(joueur2).className = 'cachemoi';
}//3
for (var placier = ouioui+1; placier < 7; placier++) {//3
joueur2 = joueur + placier;
document.getElementById(joueur2).className = 'cachemoi';
}//3
document.getElementById(joueur8).className = 'sortdutrou';
document.getElementById(joueur1).className = 'cachemoi';
}
}
function change(persistanceretinienne)
{
switch (persistanceretinienne) {
case 0:
ouioui = persistanceretinienne + 1;
joueur1 = joueur + ouioui;
joueur8 = joueur3 + ouioui;
restecalme(joueur1,joueur8,ouioui);
JoueLeSon6();
break;
case 1:
ouioui = persistanceretinienne + 1;
joueur1 = joueur + ouioui;
joueur8 = joueur3 + ouioui;
restecalme(joueur1,joueur8,ouioui);
JoueLeSon5();
break;
case 2:
ouioui = persistanceretinienne + 1;
joueur1 = joueur + ouioui;
joueur8 = joueur3 + ouioui;
restecalme(joueur1,joueur8,ouioui);
JoueLeSon4();
break;
case 3:
ouioui = persistanceretinienne + 1;
joueur1 = joueur + ouioui;
joueur8 = joueur3 + ouioui;
restecalme(joueur1,joueur8,ouioui);
JoueLeSon3();
break;
case 4:
ouioui = persistanceretinienne + 1;
joueur1 = joueur + ouioui;
joueur8 = joueur3 + ouioui;
restecalme(joueur1,joueur8,ouioui);
JoueLeSon2();
break;
case 5:
ouioui = persistanceretinienne + 1;
joueur1 = joueur + ouioui;
joueur8 = joueur3 + ouioui;
restecalme(joueur1,joueur8,ouioui);
JoueLeSon1();
break;
}
}
function durermax()
{
clearInterval(nbimg);
/* lancerChange4(); */
}
function seance()
{
change(persistanceretinienne);
persistanceretinienne--;
if ((nbboucle>1)&&(persistanceretinienne<0))
{
/* selection du nombre d'image*/
persistanceretinienne = 5;
nbboucle = nbboucle-1;
}
}
function lancertout()
{
nbimg = setInterval(seance, vitesseDuVent);
setTimeout(durermax, persistanceretinienne * 81000);
change(persistanceretinienne)
}
function JoueLeSon1(){
var multib1 = document.getElementById("1awav");
multib1.play();
}
function JoueLeSon2(){
var multic1 = document.getElementById("2awav");
multic1.play();
}
function JoueLeSon3(){
var multic1 = document.getElementById("3awav");
multic1.play();
}
function JoueLeSon4(){
var multic1 = document.getElementById("4awav");
multic1.play();
}
function JoueLeSon5(){
var multic1 = document.getElementById("5awav");
multic1.play();
}
function JoueLeSon6(){
var multic1 = document.getElementById("6awav");
multic1.play();
}
function action1Press(){
version = version + 1;
if(version>2){
version = 1;
}
}
</script>
<style>
div.img {
margin: 1%;
border: 0.5px solid #bbbccc;
float: left;
width: 180px;
}
div.img:hover {
border: 1%; solid #bbb555;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 2%;
text-align: center;
color:blue;
}
body {
position: absolute;
margin-left: 2px;
margin-top: 5px;
}
.indique{cursor:pointer;}
.cachemoi {display: none;}
.sortdutrou {display: inline;}
.volumelogo {position:absolute; margin-left:85%; margin-top:3%; width:9%; height:9%;}
.sousligne{text-decoration: underline;}
.coucheletexte{ -webkit-transform: perspective( 50px ) rotateX( -20deg );
-moz-transform: perspective( 50px ) rotateX( -20deg );
-o-transform: perspective( 50px ) rotateX( -20deg );
transform: perspective( 50px ) rotateX( -20deg );}
/*******/
.menu
{
background-color:blue;
margin: 0;
font-weight: bold;
font-size: 15px;
color: #fff;
text-align:center;
}
.menu ul
{
height: 23px;
margin: 0;
font-weight: bold;
font-size: 15px;
color: #fff;
text-align:center;
}
.menu li
{
display: inline;
list-style: none;
}
.menu a
{
color: #fff;
text-decoration: none;
}
}
</style>
<style>
@media (max-width: 480px) {
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
iframe,
object,
embed,
video {
max-width: 100%;
}
img {
height: auto;
}
textarea,
table,
td,
th,
code,
pre,
samp {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
word-wrap: break-word;
}
code,
pre,
samp {
white-space: pre-wrap;
}
element1,
element2 {
float: none;
width: auto;
}
.hide_mobile {
display: none !important;
}
body:before {
content: "Version mobile";
display: block;
text-align: center;
font-style: italic;
color: #777;
}
}
</style>
</head>
<body onload="javascript:lancertout();">
<div><audio id="1awav" src="https://www.letime.net/PianoBaul/a1.wav" preload></audio></div>
<div><audio id="2awav" src="https://www.letime.net/PianoBaul/e1.wav" preload></audio></div>
<div><audio id="3awav" src="https://www.letime.net/PianoBaul/t1.wav" preload></audio></div>
<div><audio id="4awav" src="https://www.letime.net/PianoBaul/u1.wav" preload></audio></div>
<div><audio id="5awav" src="https://www.letime.net/PianoBaul/o1.wav" preload></audio></div>
<div><audio id="6awav" src="https://www.letime.net/PianoBaul/q1.wav" preload></audio></div>
<div id="fleur1" class="cachemoi" >
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/sanglier.jpg">
<img src="https://www.letime.net/epistemologie/sanglier.jpg" alt="sanglier" width="33%" height="auto">
</a>
<div class="desc">sanglier</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/soie.jpg">
<img src="https://www.letime.net/epistemologie/soie.jpg" alt="soie" width="33%" height="auto">
</a>
<div class="desc">soie</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/sorgho.jpg">
<img src="https://www.letime.net/epistemologie/sorgho.jpg" alt="sorgho" width="33%" height="auto">
</a>
<div class="desc">sorgho</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/usine a vapeur.jpg">
<img src="https://www.letime.net/epistemologie/usine a vapeur.jpg" alt="usine a vapeur" width="33%" height="auto">
</a>
<div class="desc">usine a vapeur</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/vendanges.jpg">
<img src="https://www.letime.net/epistemologie/vendanges.jpg" alt="vendanges" width="33%" height="auto">
</a>
<div class="desc">vendanges</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/vers.jpg">
<img src="https://www.letime.net/epistemologie/vers.jpg" alt="vers" width="33%" height="auto">
</a>
<div class="desc">vers</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/volaille.jpg">
<img src="https://www.letime.net/epistemologie/volaille.jpg" alt="volaille" width="33%" height="auto">
</a>
<div class="desc">volaille</div>
</div>
</div>
<!--bis-->
<div id="bisfleur1" class="cachemoi" >
</div>
<!--fin bis-->
<div id="fleur2" class="cachemoi" >
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/manoir.jpg">
<img src="https://www.letime.net/epistemologie/manoir.jpg" alt="manoir" width="33%" height="auto">
</a>
<div class="desc">manoir</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/navire.jpg">
<img src="https://www.letime.net/epistemologie/navire.jpg" alt="navire" width="33%" height="auto">
</a>
<div class="desc">navire</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/oleagineuses.jpg">
<img src="https://www.letime.net/epistemologie/oleagineuses.jpg" alt="oleagineuses" width="33%" height="auto">
</a>
<div class="desc">oleagineuses</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/plante textile.jpg">
<img src="https://www.letime.net/epistemologie/plante textile.jpg" alt="plante textile" width="33%" height="auto">
</a>
<div class="desc">plante textile</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/pont aux changes.jpg">
<img src="https://www.letime.net/epistemologie/pont aux changes.jpg" alt="pont aux changes" width="33%" height="auto">
</a>
<div class="desc">pont aux changes</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/porcherie.jpg">
<img src="https://www.letime.net/epistemologie/porcherie.jpg" alt="porcherie" width="33%" height="auto">
</a>
<div class="desc">porcherie</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/roses.jpg">
<img src="https://www.letime.net/epistemologie/roses.jpg" alt="roses" width="33%" height="auto">
</a>
<div class="desc">roses</div>
</div>
</div>
<!--bis-->
<div id="bisfleur2" class="cachemoi" >
</div>
</div>
<!--fin bis-->
<div id="fleur3" class="cachemoi">
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/ivraie.jpg">
<img src="https://www.letime.net/epistemologie/ivraie.jpg" alt="ivraie" width="33%" height="auto">
</a>
<div class="desc">ivraie</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/jument.jpg">
<img src="https://www.letime.net/epistemologie/jument.jpg" alt="jument" width="33%" height="auto">
</a>
<div class="desc">jument</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/laboure.jpg">
<img src="https://www.letime.net/epistemologie/laboure.jpg" alt="laboure" width="33%" height="auto">
</a>
<div class="desc">laboure</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/la moisson.jpg">
<img src="https://www.letime.net/epistemologie/la moisson.jpg" alt="la moisson" width="33%" height="auto">
</a>
<div class="desc">la moisson</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/lapins.jpg">
<img src="https://www.letime.net/epistemologie/lapins.jpg" alt="lapins" width="33%" height="auto">
</a>
<div class="desc">lapins</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/les alpes.jpg">
<img src="https://www.letime.net/epistemologie/les alpes.jpg" alt="les alpes" width="33%" height="auto">
</a>
<div class="desc">les alpes</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/locomotive.jpg">
<img src="https://www.letime.net/epistemologie/locomotive.jpg" alt="locomotive" width="33%" height="auto">
</a>
<div class="desc">locomotive</div>
</div>
</div>
<!--bis-->
<div id="bisfleur3" class="cachemoi" >
</div>
<!--fin bis-->
<div id="fleur4" class="cachemoi">
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/drapeaux.jpg">
<img src="https://www.letime.net/epistemologie/drapeaux.jpg" alt="drapeaux" width="33%" height="auto">
</a>
<div class="desc">drapeaux</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/etable.jpg">
<img src="https://www.letime.net/epistemologie/etable.jpg" alt="etable" width="33%" height="auto">
</a>
<div class="desc">etable</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/foire.jpg">
<img src="https://www.letime.net/epistemologie/foire.jpg" alt="foire" width="33%" height="auto">
</a>
<div class="desc">foire</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/fontaine.jpg">
<img src="https://www.letime.net/epistemologie/fontaine.jpg" alt="fontaine" width="33%" height="auto">
</a>
<div class="desc">fontaine</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/guadeloupe.jpg">
<img src="https://www.letime.net/epistemologie/guadeloupe.jpg" alt="guadeloupe" width="33%" height="auto">
</a>
<div class="desc">guadeloupe</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/insectes.jpg">
<img src="https://www.letime.net/epistemologie/insectes.jpg" alt="insectes" width="33%" height="auto">
</a>
<div class="desc">insectes</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/instruction.jpg">
<img src="https://www.letime.net/epistemologie/instruction.jpg" alt="instruction" width="33%" height="auto">
</a>
<div class="desc">instruction</div>
</div>
</div>
<!--bis-->
<div id="bisfleur4" class="cachemoi" >
</div>
<!--fin bis-->
<div id="fleur5" class="cachemoi">
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/cane.jpg">
<img src="https://www.letime.net/epistemologie/cane.jpg" alt="8" width="33%" height="auto">
</a>
<div class="desc">cane</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/cereales.jpg">
<img src="https://www.letime.net/epistemologie/cereales.jpg" alt="9" width="33%" height="auto">
</a>
<div class="desc">cereales</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/cheval.jpg">
<img src="https://www.letime.net/epistemologie/cheval.jpg" alt="10" width="33%" height="auto">
</a>
<div class="desc">cheval</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/chien.jpg">
<img src="https://www.letime.net/epistemologie/chien.jpg" alt="11" width="33%" height="auto">
</a>
<div class="desc">chien</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/cochonchine.jpg">
<img src="https://www.letime.net/epistemologie/cochonchine.jpg" alt="12" width="33%" height="auto">
</a>
<div class="desc">cochonchine</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/coq.jpg">
<img src="https://www.letime.net/epistemologie/coq.jpg" alt="13" width="33%" height="auto">
</a>
<div class="desc">coq</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/coq 2.jpg">
<img src="https://www.letime.net/epistemologie/coq 2.jpg" alt="14" width="33%" height="auto">
</a>
<div class="desc">coq2</div>
</div>
</div>
<!--bis-->
<div id="bisfleur5" class="cachemoi" >
</div>
<!--fin bis-->
<div id="fleur6" class="cachemoi" >
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/ane-charge.jpg">
<img src="https://www.letime.net/epistemologie/ane-charge.jpg" alt="1" width="33%" height="auto">
</a>
<div class="desc">ane-charge</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/anes.jpg">
<img src="https://www.letime.net/epistemologie/anes.jpg" alt="2" width="33%" height="auto">
</a>
<div class="desc">anes</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/autruche.jpg">
<img src="https://www.letime.net/epistemologie/autruche.jpg" alt="3" width="33%" height="auto">
</a>
<div class="desc">autruche</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/bateau.jpg">
<img src="https://www.letime.net/epistemologie/bateau.jpg" alt="4" width="33%" height="auto">
</a>
<div class="desc">bateau</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/belier.jpg">
<img src="https://www.letime.net/epistemologie/belier.jpg" alt="5" width="33%" height="auto">
</a>
<div class="desc">belier</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/boeuf.jpg">
<img src="https://www.letime.net/epistemologie/boeuf.jpg" alt="6" width="33%" height="auto">
</a>
<div class="desc">boeuf</div>
</div>
<div class="img">
<a target="_blank" href="https://www.letime.net/epistemologie/cafeier.jpg">
<img src="https://www.letime.net/epistemologie/cafeier.jpg" alt="7" width="33%" height="auto">
</a>
<div class="desc">cafeier</div>
</div>
</div>
<!--bis-->
<div id="bisfleur6" class="cachemoi" >
</div>
<!--fin bis-->
</body>
</html>