JSFiddle - React, Tailwind, and code Playground

by JonNorman

HTML

<div id="topTen">
    <div>
        <h2>Top ten Shoes</h2>
        <ol>
            <li>Red Shoes</li>
            <li>Blue Shoes</li>
            <li>Green Shoes</li>
        </ol>
    </div>
    <div>
        <h2>Top ten Shirts</h2>
        <ol>
            <li>Blue Shirts</li>
            <li>Green Shirts</li>
            <li>Red Shoes</li>
        </ol>
    </div>
    <div>
        <h2>Top ten Ties</h2>
        <ol>
            <li>Red Ties</li>
            <li>Blue Ties</li>
            <li>Green Ties</li>
        </ol>
    </div>
</div>

JavaScript

$(document).ready(function() {

    function doFade(selector) {
        if ($(selector).length < 2) return;
        switch ($(selector).filter(":visible").length) {
        case 0:
            $(selector).eq(0).fadeIn("slow", function() {
                setTimeout(function() {
                    doFade(selector)
                }, 4000);
            });
            break;
        case 1:
            $(selector).filter(":visible").fadeOut("slow", function() {
                ($(this).next().length ? $(this).next() : $(this).siblings(":eq(0)")).fadeIn("slow", function() {
                    setTimeout(function() {
                        doFade(selector)
                    }, 4000);
                });
            });
            break;
        default:
            $(selector).hide();
            doFade(selector);
            break;
        }
    }
    doFade("#topTen>div");

});