Text Link Ad Rotation using jQuery

People who have been monetizing their sites need no introduction to Text Link Ads. In simple words, Text Link Ads are Hyperlinks sponsored by Advertisers. When a user clicks on these hyperlinks, they are sent to the sponsor’s website.

In this post, we will see how to rotate Text Link Ads on the same position. I will use the Cycle Plug-in for this purpose, since it accomplishes this task in just one line of code. Download the Cycle Plugin.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Text Link Ad Rotation</title>
    <script type="text/javascript"
        src="http://code.jquery.com/jquery-latest.js">
    </script>
    <script type="text/javascript"
        src="Scripts/jquery.cycle.all.min.js">
    </script>
  
    <script type="text/javascript">
        $(document).ready(function() {
        $('#Links').cycle('fade');
        });
    </script>
  
    <style type="text/css">
    body
    {
        font-size:13px;
        font-family:"Lucida Grande", "Lucida Sans Unicode";
        color:#444444;
    } 
    </style>
  
</head>
<body>
<div id="Links">
    <a href="http://www.dotnetcurry.com">.NET Articles</a>
    <a href="http://www.sqlservercurry.com">SQL Server Tips</a>
    <a href="http://saffronstroke.com">Expression Web Tips</a>
</div>
</body>
</html>

You can use the Effects Browser page to preview all the effects that are available with the Cycle Plug-in.

Note: To rotate ASP.NET Hyperlinks, replace the HTML links with the following:

<asp:HyperLink ID="HyperLink1" runat="server"
NavigateUrl="http://jquery.com">jQuery</asp:HyperLink>

There’s no need to change any other code since this asp.net control gets rendered as <a href=””…

You can see a live demo of the example given in this post over here. The Link Rotates after every few seconds.

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

2 comments:

Unknown said...: Hi,

I used your example and added prev/next buttons.

Here is a link to my blog post:

http://slavi.biz/blog/how-to-create-a-text-based-carousel-using-jquery-and-cycle-plugin-2010-05-08.html

Thanks.; May 8, 2010 at 11:26 AM
Anonymous said...: how can we add play & pause button to start, stop; April 20, 2012 at 1:49 PM