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:
thanks it helped me.
well working
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!
Hi thanks for letting me know, I guess the code became pretty old, so I have updated it now. Thanks for your suggestion too.