JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="canvas" class="canvas"><img id="img" src=""></div>

CSS

img {width:100%;height:auto;}

#canvas {border:1px solid #dddddd;margin:auto;background-size: contain;}

.canvas img {display:block;opacity: 1;}

.canvas2 img {display:block;opacity: 0;transition: opacity 2s;}

JavaScript

// Edit here

var folder = "http://www.hloe.co.uk/images/";

var images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg"];
var width = 600;
var height = 300;
var seconds = 5;

// Do not edit below here

var fading = (seconds-2) * (1000);
var time = (seconds*1000);
var canvas = document.getElementById('canvas');
var img = document.getElementById('img');
canvas.style.maxWidth = width + "px";
canvas.style.maxHeight = height + "px";


i = 0;

function slide() {

setTimeout(function(){

img.src = folder + images[i+1];
img.width = width + "px";
img.height = height + "px";

document.getElementById('canvas').className = "canvas";

fade();

if (i > images.length-3) {i = -1;} else {i=i+1;}

slide();

}, time);


}

slide();


x = 1;

function preload() {

setTimeout(function(){

canvas.style.backgroundImage = "url(" + folder + images[x+1];

if (x > images.length-3) {x = -1;} else {x=x+1;}

preload();

}, time);


}

preload();




function fade() {

setTimeout(function(){

document.getElementById('canvas').className = "canvas2";

}, fading);


}

img.src = folder + images[0];
canvas.style.backgroundImage = "url(" + folder + images[1];

fade();


// code to play with

// document.getElementById("mID").style.WebkitTransitionDuration = "1s"; // Code for Safari 3.1 to 6.0
// document.getElementById("mID").style.transitionDuration = "1s";