Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Slideshow Example | jQuery Simple Image Slideshow Example

Feb 7, 2013
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

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://lh5.googleusercontent.com/-YRAs5XWsj3k/UROnzTJcTrI/AAAAAAAAD98/UIRWUOOwbsY/s450/SaveWater.jpg" /> </div>
<div class="slide"><b>Welcome to Aspdotnet-Suresh.com SlideShow Image2</b><img src="https://lh3.googleusercontent.com/-CWFgJqYK0lo/UROnzXcKNiI/AAAAAAAAD94/H3zWwqQ03xk/s300/Hopetoun_falls2.jpg" /> </div>
<div class="slide"><b>Aspdotnet-Suresh.com SlideShow Image3</b><img src="https://lh3.googleusercontent.com/-_tRUTe8jkiY/UROnzYKamnI/AAAAAAAAD-A/PBWOsc1ZrXg/s300/slideshowImage.jpg" /> </div>
</div>
</div>
</body>
</html>
Live Demo

For Live Demo check below slideshow


Welcome to Aspdotnet-Suresh.com SlideShow Image1
Welcome to Aspdotnet-Suresh.com SlideShow Image2
Aspdotnet-Suresh.com SlideShow Image3

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 RSS subscribe by email Subscribe by Email

8 comments :

Anonymous said...

good post suresh

Anonymous said...

Can you pls tell me how to hide .aspx extention in all url of pages pls

Shibu Vs said...

awesome...greatt

Anonymous said...

vah suriya vah tu j suvir cho

Anonymous said...

Thanx dear... its supeb for jQuery beginners...............

Anonymous said...

how to use where cluse in insert query plz ans me....

Anonymous said...

Excellent explanation!!

vinayak chavan said...

nice code man.thx

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.