JSFiddle - React, Tailwind, and code Playground

by Sub Lines

HTML

<div style="height: 500%">
    <div id="imageDiv" class="imageContainer"></div>
    Spider Code
</div>

CSS

.imageContainer {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.5;
    z-index: -1;
    background-repeat: no-repeat;
}

JavaScript

var myImages = new Array("350/150", "300/250", "250/450", "150/150", "350/500");

    $(document).ready(function() {
        var random = myImages[Math.floor(Math.random() * myImages.length)];
        random = 'url(https://placekitten.com/g/' + random + ')';
        $('#imageDiv').css('background-image', random);

        setInterval(function() {
            SetImage();
        }, 5000);
    });

    function SetImage() {
        var random = myImages[Math.floor(Math.random() * myImages.length)];

        random = 'url(images/' + random + ')';
        $('#imageDiv').fadeOut(2000);

        setTimeout(function () {
            $('#imageDiv').css('background-image', random);
            $('#imageDiv').fadeIn(2000);
        }, 2000);
    }