JSFiddle - React, Tailwind, and code Playground

HTML

<div id="banners">

    <div class="banner" id="banner1"></div>
    <div class="banner" id="banner2"></div>
    <div class="banner" id="banner3"></div>
    <div class="banner" id="banner4"></div>
    
</div>

CSS

#banners {
    height:100px;
    position:relative;
}

#icons {
    position:absolute;
    top:0px;
    height:20px;
}

.banner {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}

#banner1 { background: red }
#banner2 { background: yellow }
#banner3 { background: green }
#banner4 { background: blue }

.bannerIcon {
    width:20px;
    height:20px;
    background:white;
    border:1px solid black;
    margin:4px 0 0 4px;
    float:left;
}

.currentIcon {
    background:black;
}

JavaScript

(function() {
    var bannerContainer = $('banners'), // get the banner container
        banners = bannerContainer.select('.banner'), // get the individual banners
        iconContainer,
        icons,
        bannerIndex = 0,
        timer;
    
    function play() {
        stop(); // just in case
        next();
    }
    
    function stop() {
        if( timer ) {
            clearTimeout(timer);
            timer = null;
        }
    }
    
    function next() {
        function showNext() {
            show( bannerIndex + 1 );
            next();
        }
        
        stop(); // just in case
        timer = showNext.delay(1);
    }
    
    
    function show(index) {
        stop(); // just in case
        banners[bannerIndex].hide();
        icons[bannerIndex].removeClassName('currentIcon');
        bannerIndex = index % banners.length;
        banners[bannerIndex].show();
        icons[bannerIndex].addClassName('currentIcon');
    }
    
    // hide all but the 1st banner
    banners.slice(1).invoke('hide');
    
    // create a container for for the icons
    iconsContainer = new Element('div', {id:'icons'});
    bannerContainer.appendChild(iconsContainer);
    
    // add the icons
    // annoyingly, Prototype's map function doesn't supply the index as the 2nd argument
    // like the ECMA standard Array.map() funtion, so we'll keep track of that manually
    var i = 0;
    icons = banners.map(function(banner) {
        function click(index) {
            return function(event) {
                event.stop(); // preventDefault and all that
                show(index);
            }
        }
        var icon = new Element('a', {href: '#', className: 'bannerIcon'});
        iconsContainer.appendChild(icon);
        icon.observe('click', click(i));
        if( i === 0 ) {
            icon.addClassName('currentIcon');
        }
        i++;
        return icon;
    });
    
    bannerContainer.observe('mouseenter', stop);
   ...