JSFiddle - React, Tailwind, and code Playground

by Trevor Dowdle

HTML

<p id='banner-1'>one</p>
<p id='banner-2'>two</p>
<p id='banner-3'>three</p>

JavaScript

var orderArray = []; 

$(document).ready(function() {
var divs = $('p[id^="banner-"]').hide(),
    i = 0;
    while(orderArray.length < divs.length){
        i = (Math.random() * 100).toFixed(0) % divs.length;
        if(orderArray.indexOf(i) == -1){
            orderArray.push(i);    
        }
    }
    i = 0;
(function cycle() {
    divs.eq(orderArray[i]).fadeIn(400).delay(2500).fadeOut(400, cycle);
    var old = i;
    while(old == i){
        i = (Math.random() * 100).toFixed(0) % divs.length;
    }
})();
});