JSFiddle - React, Tailwind, and code Playground

by Sean Wessell

HTML

<div class="container-adv">
    <a href="http://www.highendboston.com" target="_blank"><img id="advert" src="http://placehold.it/350x150" ><a/>
</div>

CSS

.container-adv {
    height:100px;
    display:block;
    background-color:lightgrey;
    text-align:center;
    position: relative;
    overflow: hidden;
}
.container-adv>a>img {
        position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
    max-height:100%;
}

JavaScript

var imgarr = ['http://placehold.it/350x150', 'http://placehold.it/150x150', 'http://placehold.it/500x150', 'http://placehold.it/800x200','http://placehold.it/1400x200']
var imgIndex = 0;

    setInterval(function () {        
        imgIndex = imgIndex + 1;

        if (imgIndex == imgarr.length) {
            imgIndex = 0;
        }

        $('#advert').attr('src', imgarr[imgIndex]);
    }, 3000);