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="http://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().sort(function(){
return Math.round(Math.random());
}).slice(0,1);
$(divs).show();
});
</script>
</head>
<body>
<!--Between <div class="ads"> tag you can also use ad scripts!. Eg: adsense ads-->
<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>
</body>
</html>

Here is the demo for your convenience:

Demo

2 Comments

Add a Comment

Your email address will not be published. Required fields are marked *