JSFiddle - React, Tailwind, and code Playground

by admiringtheorchid

HTML

<div class="item">

<script type="text/javascript">document.writeln('<img src="'+img[0]+'" 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;
}
div.item > img {
	width: 80%;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
  -ms-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() {
	document.images["VCRImage"].src = img[imgNumber++]

	if (imgNumber == img.length) {
			img.shuffle ();
			imgNumber = 0;
	}
}

window.setInterval (NextImage, 3000);