Show Random ads using jQuery Tutorial!

This post teaches you how to show different ads each time when a user refresh the page. It’s very simple using jQuery and If you see the number of lines of code It’s only 5 Lines!

Copy and Paste the below code and give the path of the images or script to display random ads:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<style>
.ads{
display:none;
}
</style>
<script type="text/javascript">

$(document).ready(function(){
var divs = $("div.ads").get(Math.round(Math.random() * 4));
$(divs).show();
});
</script>
</head>
<body>
<h1>Refresh this page to see different ads</h1>
<div class="ads"><a href=""><img src="ads/ad1.jpg" border="0" /></a></div>
<div class="ads"><a href=""><img src="ads/ad2.jpg" border="0" /></a></div>
<div class="ads"><a href=""><img src="ads/ad3.jpg" border="0" /></a></div>
<div class="ads"><a href=""><img src="ads/ad4.jpg" border="0" /></a></div>
<div class="ads"><a href=""><img src="ads/ad5.jpg" border="0" /></a></div>
<br >
<a href="https://theonlytutorials.com/show-random-ads-jquery-tutorial/">See the Tutorial & Copy the Script Here</a>
</body>
</html>

Here is the demo for your convenience:

demo

 

 

4 thoughts on “Show Random ads using jQuery Tutorial!

  1. Not working this way, it always gets only the first item.
    But if you replace
    return Math.round(Math.random());
    with
    return Math.random()-0.5;
    it works perfect!

    1. Hi thanks for letting me know, I guess the code became pretty old, so I have updated it now. Thanks for your suggestion too.

Leave a Reply

Theme: Overlay by Kaira
Agurchand