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:



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.



Step 3

Add the jQuery scripts to load the AdRotator.



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.