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

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.