AdRotator Using jQuery

Introduction

In this article will see how to create an AdRotator using jQuery without using the AdRotator ASP.NET control.

Step 1

Add the jQuery file and reference in your page, as in:

JQuery1.jpg

Step 2

Create some static "LI" elements as shown below. We can dynamically create these elements from the DB also. Notice that the "Div" id needs to referred to in jQuery.

JQuery2.jpg

Step 3

Add the jQuery scripts to load the AdRotator.

JQuery3.jpg

In the script, first the variable for the active "LI" element needs to be initialized and we set to "0". Using "nth-child()" jQuery selector we can select specific child elements and check the following link for more details about the selector:

http://api.jquery.com/nth-child-selector/

Step 4

Run the solution and check the output.

Summary

Creating an AdRotator using jQuery is simple as well as powerful.