Step 7: In this step you will see the body code of the Default2.aspx page which is given below.
Code
<body>
<div id="main">
<ul id="holder">
<li><b> <img src="ima/Sachin%20Tendulkar.jpg" height="150px" width="340px"/> </li>
<li><img src="ima/lotus%20temple.jpg" height="150px" width="340px" /> </li>
<li> <img src="ima/MP900438794.JPG" height="150px" width="340px" /></li>
<li><img src="ima/taj-mahal.jpg" height="150px" width="340px"/></li>
<li> <img src="ima/woman.JPG" height="150px" width="340px" /></li>
<li><img src="ima/Ball.JPG" height="150px" width="340px" /></li>
<li> <img src="ima/red.jpg" height="150px" width="340px" /></li>
<li><img src="ima/alien.jpg" height="150px" width="340px" /></li>
<li><img src="ima/wesdal.jpg" height="150px" width="340px" /></li>
<li><img src="ima/god.jpg" height="150px" width="340px" /></li>
<li><img src="ima/nice.jpg" height="150px" width="340px" /></li>
<li><img src="ima/hours.jpg" height="150px" width="340px"/></li>
<li><img src="ima/nature.jpg" height="150px" width="340px"/></li>
<li> <img src="ima/tiger.jpg" height="150px" width="340px"/></li>
<li> <img src="ima/wawk.jpg" height="150px" width="340px" /></li>
</ul>
</div>
Step 8: In this step we will see the complete code of the Default2.aspx page which is given below.
Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title> A Simple Pagination using jQuery </title>
<link href="Styles/styles.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/script.js" type="text/javascript"></script>
<script src="Scripts/JScript1.js" type="text/javascript"></script>
</head>
<body>
<div id="main">
<ul id="holder">
<li><b> <img src="ima/Sachin%20Tendulkar.jpg" height="150px" width="340px"/> </li>
<li><img src="ima/lotus%20temple.jpg" height="150px" width="340px" /> </li>
<li> <img src="ima/MP900438794.JPG" height="150px" width="340px" /></li>
<li><img src="ima/taj-mahal.jpg" height="150px" width="340px"/></li>
<li> <img src="ima/woman.JPG" height="150px" width="340px" /></li>
<li><img src="ima/Ball.JPG" height="150px" width="340px" /></li>
<li> <img src="ima/red.jpg" height="150px" width="340px" /></li>
<li><img src="ima/alien.jpg" height="150px" width="340px" /></li>
<li><img src="ima/wesdal.jpg" height="150px" width="340px" /></li>
<li><img src="ima/god.jpg" height="150px" width="340px" /></li>
<li><img src="ima/nice.jpg" height="150px" width="340px" /></li>
<li><img src="ima/hours.jpg" height="150px" width="340px"/></li>
<li><img src="ima/nature.jpg" height="150px" width="340px"/></li>
<li> <img src="ima/tiger.jpg" height="150px" width="340px"/></li>
<li> <img src="ima/wawk.jpg" height="150px" width="340px" /></li>
</ul>
</div>
</body>
</html>
Step 9: In this step we will see the design of the Default2.aspx page which is given below.
![img4.jpg]()
Step 10: In this step we are going to run the Default2.aspx page by pressing F5.
![img5.jpg]()
Now click on the bullets to see the effect.
![img6.jpg]()
![img7.jpg]()
![img8.jpg]()
![img9.jpg]()
Resources