<head runat="server">
<%--needs to download "jquery-1.6.4.min.js","jquery.easing.1.3.js" and jquery.cycle.all.js files from the net. Just search in google for this file directly --%>
<script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="Scripts/jquery.cycle.all.js" type="text/javascript"></script>
<title>Sample jQuery Sliding Image Application</title>
<script type="text/javascript">
jQuery(document).ready(function ()
{
if (jQuery('#SlideImages').length > 0)
{
jQuery('#SlideImages').cycle(
{
fx: 'curtainX', speed: 500, timeout: 5000, randomizeEffects: true, easing: 'easeInOutBounce',
next: '.NextSlide',prev: '.PrevSlide',pager: '#SlideStyleNav',cleartypeNoBg: true
});
}
});
</script>
<%--Prev.png and Next.png are the two small buttons to navigate next and prev on click ImageCount.png is the image count we display at the bottom of the page.--%>
<style type="text/css">
#SlideStyle{position:relative;width:400px;}
#SlideStyle .PrevSlide, #SlideStyle .NextSlide{display:block;position:absolute;width:40px;height:40px;top:150px;z-index:9999;text-decoration:none;}
#SlideStyle .PrevSlide{left:0;background:transparent url(images/Prev.png) no-repeat top left;}
#SlideStyle .NextSlide{right:0;background:transparent url(images/Next.png) no-repeat top left;}
#SlideStyleNav {position:absolute; bottom:0; z-index:9999;}
#SlideStyleNav a{background:transparent url(images/ImageCount.png) no-repeat 0 0 ; float:left; height:15px; overflow:hidden; text-decoration:none; text-indent:-1234px; width:16px;}
#SlideStyleNav a.activeSlide {background-position:-32px 0;}
#SlideImages{overflow: hidden; position: relative;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="SlideStyle">
<div id="SlideImages">
<%--Needs to add images in IMAGE folder, in this examle I have added 6 Images--%>
<%--Image size can be changed depends on the size of image you are using, my code shrinks the image according to the size you are mentioning --%>
<img src="images/1.jpg" alt="Image 1" width="400" height="300" />
<img src="images/2.jpg" alt="Image 2" width="400" height="300" />
<img src="images/3.jpg" alt="Image 3" width="400" height="300" />
<img src="images/4.jpg" alt="Image 4" width="400" height="300" />
<img src="images/5.jpg" alt="Image 5" width="400" height="300" />
<img src="images/6.jpg" alt="Image 6" width="400" height="300" />
</div>
<a class="PrevSlide" href="#"> </a>
<a class="NextSlide" href="#"> </a>
<div id="SlideStyleNav"> </div>
</div>
</form>
</body>