JSFiddle - React, Tailwind, and code Playground
HTML
<div class="item">
<script type="text/javascript">document.writeln('<img src="'+img[NumberOfImages-1]+'" name="VCRImage">');</script>
</div>
CSS
html {
height: 100%;
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
height: 100%;
}
.item {
width: 100%;
height: 100%;
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
div.item > img {
width: 80%;
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
JavaScript
var NumberOfImages = 5
var img = new Array(NumberOfImages)
img[0] = "https://upload.wikimedia.org/wikipedia/commons/c/ce/Gustave_Courbet_001.jpg"
img[1] = "https://upload.wikimedia.org/wikipedia/commons/2/2d/Gustave_Courbet_-_La_vague_-_Google_Art_Project.jpg"
img[2] = "https://upload.wikimedia.org/wikipedia/commons/c/c5/Gustave_Courbet_-_The_Trout_-_WGA05474.jpg"
img[3] = "https://upload.wikimedia.org/wikipedia/commons/a/a0/Gustave_Courbet_%28French_-_Grotto_of_Sarrazine_near_Nans-sous-Sainte-Anne_-_Google_Art_Project.jpg"
img[4] = "https://upload.wikimedia.org/wikipedia/commons/9/93/Gustave_Courbet_-_Bonjour_Monsieur_Courbet_-_Mus%C3%A9e_Fabre.jpg"
Array.prototype.shuffle = function () {
var len = this.length;
var i = len;
while (i--) {
var p = parseInt(Math.random()*len);
var t = this[i];
this[i] = this[p];
this[p] = t;
}
};
img.shuffle ();
var imgNumber = 0
function NextImage() {
//create a jQuery object of the image
var $image = $(document.images["VCRImage"]);
//fade out the image, and once it has finished fading out...
$image.fadeOut(function() {
//change the image source
$image.attr("src", img[imgNumber++]);
});
//fade the image back in
$image.fadeIn();
if (imgNumber == img.length) {
img.shuffle ();
imgNumber = 0;
}
}
window.setInterval(NextImage, 9000);