Show the random Ad banners easily with JQuery

For display random Ad banners when user refresh browser, we can use a bit of code bellow:

Copy and paste this code into your Javascript file:

$(document).ready(function() {
   var banners = [];
   var index = 0;
   banners[1] = '<div class="banners banner1">This is banner 01</div>';
   banners[2] = '<div class="banners banner2">This is banner 02</div>';
   banners[3] = '<div class="banners banner3">This is banner 03</div>';
   index = Math.floor(Math.random() * banners.length);
   $("#banner").html(banners[index]);
  });

Copy this code


In this code, we use banners arrays to save all of banner that we want to show with index is a random position in this array.
We use Math.random to get number of index with max is banners.length

Don't for get add Jquery file from CDN on header tag like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Copy this code


Add an element that you want to show the banner, put the default banner inside it:

<div id="banner"><div class="banners banner1">This is banner 01</div></div>
Copy this code


Demo: Press refresh button to see your result