1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98
| <!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Diaporama basique</title>
</head>
<body>
<h3>Diaporama basique</h3>
<p>
<button id="OnOff">start</button>
<span id="refImage">...</span>
</p>
<p><img id="PlaceImage" src="images/0000.jpg" /></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
var
ref_Image = 0,
NbreImages = 21,
tempoImages = 3000, // miliemes de secondes soit ici 3s
pathImages = "images/",
LoopProcess = false,
$refImage = $('#refImage'),
$theImage = $('#PlaceImage')
;
// retourne le path de la prochaine image.
// ici le mom des images est un chiffre allant de 0 à 20 présenté ainsi "images/0000.jpg" à "images/0020.jpg"
function nextImage() {
var NoImg = (++ref_Image % NbreImages).toString();
$refImage.html( NoImg + " / " + (NbreImages -1).toString() );
return (pathImages + '0'.repeat(4 - NoImg.length) + NoImg + ".jpg");
}
// un Zoli bt de controle pour stopper ou relancer l'affichage.
$("#OnOff").on('click', function () {
LoopProcess = ($(this).html() == "start");
$(this).html( LoopProcess ? "stop" : "start" )
if (LoopProcess) p_infiniteLoopProcess();
});
/* ------------------------------------------------------------- *\
| Fonctions asynchrones, mises en promesses |
| |
| normalement elles devraient toute avoir un gestion de rejet |
| mais il fallait bien que je vous laisse du code à faire ;) |
| |
| return new Promise(function(resolve, reject){... |
\* ------------------------------------------------------------- */
// affiche l'image.
// je préfere le fetch pour cet exemple, mais ce pourrait tout aussi bien être une req Ajax
function p_changeImage( refImage ) {
return new Promise(function(resolve){
fetch(refImage)
.then(function( resp ) { return resp.blob(); })
.then(function( myBlob ) {
var objectURL = URL.createObjectURL(myBlob);
$theImage.fadeOut(800, function() {
$(this)
.attr('src', objectURL)
.fadeIn(800)
.delay(tempoImages)
.queue(function(next) {
resolve(0);
next();
});
});
});
});
}
// la boucle sans fin pour afficher les images
function p_infiniteLoopProcess (){
return p_changeImage( nextImage() )
.then(function( resp ){
return new Promise(function(resolve){
if( LoopProcess ) {
return resolve( p_infiniteLoopProcess() );
}else{
resolve();
}
});
});
}
});
</script>
</body>
</html> |
Partager