<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Slide Show using jQuery</title>
<script type='text/javascript' src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js'></script>
<script type="text/javascript">
var images=['Images/amazing2.jpg','Images/Giraffe_tutorial_600.jpg','Amazing.jpg'];
var count=images.length;
$(function()
{
setInterval(Slider,2000);
});
function Slider()
{
$('#imgSlide').fadeOut("slow", function()
{
$(this).attr('src', images[(images.length++) % count]).fadeIn("slow");
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
<asp:Image ID="imgSlide" runat="server" ImageUrl="~/Images/Amazing.jpg" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Now, coming to scripting code, we have added jQuery file to src attribute in a scripting tag. In code, we have used one function which used to set the interval to display image and also it is calling the Slider Function. The slider function is used to fade In and fade out images. Please remember that we have taken a list of images in a images variable those images only will be displayed in image slider. Please make sure that you can only visible one image when you experience slide show output while running the page.
Like this, we can display any number of images in a slide show using jQuery.
Happy coding...
Always welcome for any comments...
Happy Coding .... !!!!
How to Create Image Slider in Asp.Net using jQuery
How to Disable Copy/Cut/Paste Options in TextBox
How to Implement Scrollable Grid with Fixed Header in Asp.Net using jQuery ?
How to Set Default Home Page in Internet Explorer or Mozilla Browser
How to Read and Write Connection String in Web.Config
How to Disable Browser Back Button using Javascript in ASP.Net
How to Display Excel data in Gridview using Asp.Net
Dynamically Add Check Boxes in Asp.Net Web Page
How to Create Image Slider in Asp.Net using jQuery
How to Disable Copy/Cut/Paste Options in TextBox
How to Implement Scrollable Grid with Fixed Header in Asp.Net using jQuery ?
How to Set Default Home Page in Internet Explorer or Mozilla Browser
How to Read and Write Connection String in Web.Config
How to Disable Browser Back Button using Javascript in ASP.Net
How to Display Excel data in Gridview using Asp.Net
Dynamically Add Check Boxes in Asp.Net Web Page
This post first appeared on Dot Net Programming (C#, Asp.Net, ADO.Net, WCF, WPF, Ajax, LINQ), please read the originial post: here
