Introduction:
Here
I will explain how to create simple slideshow using jQuery or simple jQuery slideshow
example in asp.net.
Description:
In previous articles I explained jQuery Add blinking effect to text, JavaScript generate random colors using setInterval function, Start and Stop timer in JavaScript, jQuery change textbox background color on focus and many articles relating to JavaScript, jQuery, asp.net. Now I will explain how to create simple slideshow using jQuery in asp.net.
In previous articles I explained jQuery Add blinking effect to text, JavaScript generate random colors using setInterval function, Start and Stop timer in JavaScript, jQuery change textbox background color on focus and many articles relating to JavaScript, jQuery, asp.net. Now I will explain how to create simple slideshow using jQuery in asp.net.
To implement this we need to write the
code like as shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery
Simple Slideshow Example in Asp.net</title>
<script src="http://code.jquery.com/jquery-1.8.2.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function ()
{
var currentPosition = 0;
var slideWidth = 500;
var slides = $('.slide');
var numberOfSlides = slides.length;
setInterval(changePosition, 3000);
slides.wrapAll('<div
id="slidesHolder"></div>');
slides.css({ 'float':
'left' });
$('#slidesHolder').css('width', slideWidth * numberOfSlides);
function changePosition() {
if (currentPosition == numberOfSlides - 1) {
currentPosition = 0;
}
else {
currentPosition++;
}
moveSlide();
}
function moveSlide() {
$('#slidesHolder').animate({
'marginLeft': slideWidth *
(-currentPosition) });
}
});
</script>
<style type="text/css">
#slideshow #slideshowWindow
{
width:500px;
height:257px;
margin:0;
padding:0;
position:relative;
overflow:hidden;
}
#slideshow #slideshowWindow
.slide
{
margin:0;
padding:0;
width:500px;
height:257px;
float:left;
position:relative;
}
</style>
</head>
<body>
<div id="slideshow">
<div id="slideshowWindow">
<div class="slide"><b>Welcome to
Aspdotnet-Suresh.com SlideShow Image1</b> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx1DrI7NOMARRCPvwNIhhyphenhyphenAQPTLqSkKxLB71Xk8o6zrICBSbGIRo_cIi97UELnoNngtJBr7F0WCmC2DCr-_25XxKx8pK2VYMd4o3cpmau7zLMWSVAbjoYiVWp5Zp_-NJTN5S1yXlqz7oc/s450/SaveWater.jpg"
/> </div>
<div class="slide"><b>Welcome to
Aspdotnet-Suresh.com SlideShow Image2</b><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgii02p3VoVUzTKbQ76F7ZzXPEegHRsR7SuyLhgETezMegBZ2m0J2X-X7iwlQD_XEymbWgPbAi8kmWavsKEkBL9y3gqAHA8iAzXZ4w2NIuy8DNqWQKhDucbDG63Z6J5m4wjrGjHShMWlUI/s300/Hopetoun_falls2.jpg"
/> </div>
<div class="slide"><b>Aspdotnet-Suresh.com
SlideShow Image3</b><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibhivJGHi43VVnUm2GQ9gYrHYv9H15FUDZH4fpGKnOv7c7bOND-wwbYZfy43pWHhItdX5CLQ6VJNxm8NL1f7jxoAhCcQ6uTpbJ5O4S8C1nY8zvaVXsYtHBdjDP5z41lriTTXhrfK4HwhI/s300/slideshowImage.jpg"
/> </div>
</div>
</div>
</body>
</html>
|
Live
Demo
For
Live Demo check below slideshow
|
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
12 comments :
good post suresh
Can you pls tell me how to hide .aspx extention in all url of pages pls
awesome...greatt
vah suriya vah tu j suvir cho
Thanx dear... its supeb for jQuery beginners...............
how to use where cluse in insert query plz ans me....
Excellent explanation!!
nice code man.thx
awesome...greatt
thanks.. awesome article.
Thanks bro...
Awesome bro Its very helpful
Note: Only a member of this blog may post a comment.