Рандомный показ элемента при загрузке страницы

Решение в лоб:
HTML:

<div id="container">
  <div class="banner">
    <a><img src="#"></a>
  </div>

  <div class="banner">
    <a><img src="#"></a>
  </div>

  <div class="banner">
    <a><img src="#"></a>
  </div>
</div>

JS:

let container = document.getElementById("container");
let children = container.children;

let index = Math.floor(Math.random() * children.length);

for(let i = 0; i < children.length; i++) {
    if(index != i) {
        children[i].style.display= "none";
    }
}

JS:

$(document).ready(function() {
   const randomNum = Math.floor(Math.random() * 3) + 1;
   const bannerIndex = randomNum - 1;

   const banner = document.getElementsByClassName('banner')[bannerIndex];
   $(banner).addClass('display');
})

CSS:

.banner {
    display: none;
}

.banner.display {
    display: block;
}